[웹디자인기능사 실기] 2024 공개문제 분석 (F타입 포함)

안녕하세요 PNcoding입니다 :)

2024년도 공개문제를 분석을 한번 해보도록 하겠습니다.

 

2024년도 문제에서는 F타입이 추가가 되었네요.

각 타입별로 4개씩 해서 총 공개문제는 24개가 제공이 되어 있어요.

 

A~E 타입까지는 작년도 공개문제와 동일하니 전 포스팅을 참고해 주시면 되겠습니다 :)

https://pncoding.tistory.com/17

[웹디자인기능사 실기] 공개문제 분석

 

 

공개문제 다운로드를 하지 못하신 분들은 아래 포스팅을 참고해 주세요.

https://pncoding.tistory.com/45

[웹디자인기능사 실기] 2024 공개문제 다운로드

 

 

또한 시험이라면 중요하게 체크를 해야 할 부분이 있습니다.

바로 유의사항 및 실격 요인이죠.

실격요인과 관련된 내용은 아래 포스팅을 참고해 주시면 되겠습니다.

https://pncoding.tistory.com/16

[웹디자인기능사 실기] 유의사항 및 실격요인

 

---

 

 

1. 와이어프레임

https://pncoding.tistory.com/17

[웹디자인기능사 실기] 공개문제 분석

 

공개문제 A~E 타입까지의 와이어프레임을 확인해 주세요 :)

 

F타입 와이어프레임

 

와이어 프레임을 보았을 때 D와 E타입에 비해 복잡하지 않은 것을 확인할 수 있으나 몇 가지 체크해야 할 사항이 보입니다.

1. A, C, D 영역의 가로크기 1340px
2. C영역의 Link부분은 B영역과 겹쳐져 있음
3. C영역의 세로크기는 임의지정

 

 

---

 

 

F타입의 와이어프레임까지 포함해서 간단하게 정리해 보도록 하겠습니다.

타입	내용 정리
A타입	wrap 영역의 가로크기 1200px 가운데 정렬
B타입	wrap 영역의 가로크기 브라우저 가득 100%, 그 안쪽 컨텐츠의 영역이 1200px 가운데정렬
C타입	wrap 영역의 가로크기 1000px 왼쪽정렬
D타입	wrap영역의 가로크기 100%, B영역의 크기는 calc함수 활용 계산
E타입	wrap영역의 가로크기 100%, 세로크기 100%,  B영역의 크기는 calc함수 활용 계산
F타입	wrap영역의 가로크기 100%, 그 안쪽 컨텐츠 영역 1340px 가운데정렬, C영역 세로크기 임의지정, C영역의 Link 위치가 B영역의 위치랑 겹치게 작업

 

F 타입의 C영역의 Link의 위치는 B영역과 겹치는데

이를 구현하기 위해서는 position속성을 활용하여 레이아웃을 구성하면 됩니다.

 

---

 

 

 

 

F타입까지 포함된 콘텐츠들을 분석해 보도록 하겠습니다.

 

2. 컨텐츠 유형 분석

 

0) 주조색 보조색 및 배경색, 텍스트색

배경색, 텍스트색 지정	A1 ~ A4, B1 ~ B4, C1 ~ C4, D1 ~ D4, E1 ~ E4, F1 ~ F4
주조색, 보조색 자유롭게	A1 ~ A4, B1 ~ B4, C1 ~ C4, D1 ~ D4, E1 ~ E4, F1
주조색 지정, 보조색 자유롭게	F2, F4
주조색, 보조색 지정	F3

 

1) 로고

심벌 없이 직접 디자인	A1, A2, B1, B2, C1, C2, D3, D4
심벌 추가하고 직접 디자인	E2, E4, F2, F4
제공된 로고 사용하되 사이트의 주제에 맞게 색상 변경, 종횡비 유지	A3, A4, B3, B4, C3, C4
제공된 로고 사용하되 그대로 사용가능, 종횡비 유지	D1, D2, E1, E3, F1, F3

 

심벌이라는 뜻은 로고 옆에 아이콘(이미지)을 두어 디자인을 하라는 의미입니다.

예를 들면

이런 식으로 네이버 로고명 옆 모자 이미지가 들어간 상태로 로고를 만들어 달라는 의미라 보시면 되겠습니다 :)

출처 ) https://m-logoproject.naver.com/logonaver

logo bi:logoproject

 

 

2) 메뉴

서브메뉴 전체 펼쳐지는 타입	A1, B1
와이어프레임 1200px 일시 헤더 전체 서브메뉴 펼쳐지는 타입	A2, A4
와이어프레임 100% 일시 헤더전체(100%) 서브메뉴 펼쳐지는 타입	B2, B4, F3, F4
메인메뉴의 서브메뉴만 펼쳐지는 타입	A3, B3, F1, F2
세로메뉴이며 서브메뉴가 아래로 펼쳐지는 타입	C1, C2, D1, D2, E1, E2
세로메뉴이며 서브메뉴가 옆으로 펼쳐지는 타입	C3, C4, E3, E4
세로메뉴이며 서브메뉴가 옆으로 펼쳐지지만 크기가 브라우저 가득차는 타입	D3, D4

메뉴 밑 스팟메뉴 추가

D1, D3, E1, E3

 

3) 슬라이드

좌우	A2, B1, B4, C3, C4, D2, E1, E4, F3
위아래	A1, B2, B3, D1, E2, E3, F4
fadeIn/Out	A3, A4, C1, C2, D3, D4, F1, F2

 

4) 탭

탭 구현	A1, A3, B1, C1, D1, D3, F1, F3
탭 미구현	A2, A4, B2, B3, B4, C2, C3, C4, D2, D4, E1, E2, E3, E4, F2, F4

 

5) 팝업

공지사항 첫번째 컨텐츠 클릭시 팝업 등장

모든 타입

 

6) 갤러리

마우스 오버시 opacity 조절

A4, B3, C3, D4, E3, F3

 

 

 

 

---

 

 

 

2024 기준 A~F타입의 세부내용을 분석하여 보았습니다.

 

F타입이 추가되었긴 하지만, 세부적인 내용은 동일하게 진행이 되는 것을 확인할 수 있습니다.

와이어프레임만 잘 체크하여 푸신다면 충분히 합격하실 수 있으실 거예요 :)