실기

완성사이트

알클👩‍🏫 - 웹디자인기능사

https://aloha-class.github.io/web_design_ginuengsa/

코드&자료

web_design_ginuengsa

ALOHA-CLASS

공개문제(기출문제) 분석

기출 분석

2024년도 기준. 웹디자인 기능사 실기 시험은 총 24개 공개 문제 중 임의의 한 유형이 출제됩니다.

문제 내용

아래 구성 요소들을 포함하여 메인 페이지; 한 페이지를 완성하는 문제가 출제됩니다.

•

로고

•

메뉴 슬라이드

•

이미지 슬라이드

기출 분석

웹디자인 개발 기능사 작업 순서

1. 디자인

작업에 사용할 이미지 리소스를 미리 준비함으로써 이후 작업이 수월해집니다.

•

 로고 제작

사이트의 브랜드 아이덴티티를 결정하는 가장 핵심 요소

심볼 로고 유형인 경우만, 일러스트레이터로 로고 제작

•

 슬라이드 이미지 제작

메인 슬라이드용 이미지 구성 (보통 3장)

주로, 포토샵으로 원본 이미지 크기 조절, 이미지 위에 텍스트 작성

•

 갤러리 이미지 준비

썸네일 이미지 또는 클릭 시 확대되는 이미지

주로, 포토샵으로 원본 이미지 크기 조절

작업 순서

기출 유형 A

유형	주제	컬러	레이아웃	로고	메뉴	슬라이드	컨텐츠	푸터
B1	대한은행	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 1200 가운데	워드타입	가로 멀티	가로 슬라이드	(공지+팝업)+갤러리3 배너 바로가기	\| 하단메뉴 Logo \|—————- \| Copy
B2	대한투어	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 1200 가운데	워드타입	가로 100% 멀티	세로 슬라이드	공지+팝업 / 갤러리3 별도 바로가기	\| SNS Copy \|—————- \| Family
B3	세계의 미술작품	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 1200 가운데	제공로고	가로 기본	세로 슬라이드	공지+팝업 / 갤러리3 별도 바로가기	Logo \| Copy \| SNS
B4	산업대학교	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 1200 가운데	제공로고	가로 100% 멀티	가로 슬라이드	공지+팝업 / 갤러리3 별도 배너	하단 메뉴 \| —————-\| Family Copy \|

기출 유형 B

유형	주제	컬러	레이아웃	로고	메뉴	슬라이드	컨텐츠	푸터
C1	해운대 빛축제	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 1000	워드타입	세로 아래	페이드 슬라이드	(공지+팝업)+갤러리3 배너 바로가기	\| 하단메뉴 Logo \|—————- \| Copy
C2	부여 가을연꽃축제	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 1000	워드타입	세로 아래	페이드 슬라이드	공지+팝업 / 갤러리3 별도 배너	\| SNS Copy \|—————- \| Family
C3	남도맛기행 축제	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 1000	제공로고	세로 기본	가로 슬라이드	공지+팝업 / 갤러리3 별도 배너	\| 하단메뉴 Logo \|—————- \| Copy
C4	Vallery Festival	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 1000	제공로고	세로 기본	가로 슬라이드	공지+팝업 / 갤러리3 별도 바로가기	Logo \| Copy \| Family

기출 유형 C

유형	주제	컬러	레이아웃	로고	메뉴	슬라이드	컨텐츠	푸터
D1	조이컨트리클럽	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 100%	제공로고	세로 아래 + 스팟메뉴	세로 슬라이드	배너 (공지+팝업)+갤러리3 바로가기 (Fixed)	Logo \| Copy \| SNS
D2	서울구석구석	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 100%	제공로고	세로 아래	가로 슬라이드	배너 (슬라이드 옆) (공지+팝업)+갤러리3	Logo \| Copy \| Family
D3	푸른마을	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 100%	워드타입	세로 100% 멀티 + 스팟메뉴	페이드 슬라이드	바로가기 (Fixed) 배너 (공지+팝업)+갤러리3 (100%)	\| 하단메뉴 Logo \|————- \| Copy
D4	리빙샵아울렛	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 100%	워드타입	세로 100% 멀티	페이드 슬라이드	바로가기 (100%, 7) 공지+팝업 / 갤러리3 별도 (100%)	하단 메뉴 \| —————-\| Family Copy \|

기출 유형 D

유형	주제	컬러	레이아웃	로고	메뉴	슬라이드	컨텐츠	푸터
E1	김치이야기	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 100%	제공로고	세로 아래 + 스팟메뉴	가로 슬라이드	배너 공지+팝업 / 갤러리2 별도 바로가기	\| 하단메뉴 Logo \|—————- \| Copy
E2	역사박물관	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 100%	심벌로고	세로 아래	세로 슬라이드	공지+팝업 / 갤러리2 별도 바로가기	Logo \| Copy \| Family
E3	영상박물관	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 100%	제공로고	세로 기본 + 스팟메뉴	세로 슬라이드	배너 공지+팝업 / 갤러리2 별도	Logo \| Copy \| SNS
E4	철길 마을	Main - 자유 Sub - 자유 Background - #ffffff Text - #333333	가로 100%	심벌로고	세로 기본	가로 슬라이드	배너 공지+팝업 / 갤러리2 별도 바로가기	\| 하단메뉴\| Logo \|————-\| Family \| Copy \|

기출 유형 E

유형	주제	컬러	레이아웃	로고	메뉴	슬라이드	컨텐츠	푸터
F1	주식회사 기능건설	Main - 자유 Sub - 자유 Background - #ffffff Text - #666666	가로 1340 가운데	제공로고	가로 기본	페이드 슬라이드	바로가기 배너 (공지+팝업)+갤러리3	\| 하단메뉴 Logo \|————- \| Copy
F2	기능대학교	Main - #1b3b86 Sub - 자유 Background - #ffffff Text - #333333	가로 1340 가운데	심벌로고	가로 기본	페이드 슬라이드	바로가기 배너 공지+팝업 / 갤러리3 별도	\| SNS Copy \|—————- \| Family
F3	오픈뱅킹	Main - #0a9b97 Sub - #f04467 Background - #ffffff Text - #666666	가로 1340 가운데	제공로고	가로 100% 멀티	가로 슬라이드	바로가기 배너 (공지+팝업)+갤러리3(투명효과)	\| 하단메뉴 Logo \|————- \| Copy
F4	하이글로벌컴퍼니	Main - #e31a40 Sub - 자유 Background - 자유 Text - #333333	가로 1340 가운데	심벌로고	가로 100% 멀티	세로 슬라이드	바로가기 (슬라이드 위로 오버랩) 배너 공지+팝업 / 갤러리3 별도	Logo \| Copy \| Family

기출 유형 F

디자인 하기

로고 제작하기

•

유형

◦

제공 로고 (+주제 색 변경)

◦

심볼 로고

◦

워드 타입

•

포토샵 & 일러스트레이터 주요 기능

◦

포토샵

◦

일러스트레이터

•

기출 연습

◦

제공 로고 (주제 색 변경)

◦

심볼 로고

◦

워드 타입

로고 제작하기

슬라이드 이미지 디자인하기

•

작업 내용

◦

이미지 크기 조절

◦

주어진 텍스트 얹기

작업 내용

•

이미지 크기 조절

•

주어진 텍스트 얹기

슬라이드 이미지 디자인하기

배너&바로가기 디자인 하기

기능 구현하기

이미지 슬라이드

•

가로 슬라이드

•

세로 슬라이드

•

페이드 슬라이드

이미지 슬라이드

메뉴 슬라이드

•

분류

◦

슬라이드 메뉴

◦

페이드 메뉴

•

유형

◦

슬라이드

▪

가로 

◦

페이드

메뉴 슬라이드

레이어 팝업

레이아웃 코딩하기

헤더

슬라이드

탭 메뉴 (공지사항, 갤러리)

배너

푸터

레이어 팝업