작업 순서

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

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

•

 로고 제작

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

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

•

 슬라이드 이미지 제작

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

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

•

 갤러리 이미지 준비

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

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

HTML/CSS를 통해 전체적인 구조를 먼저 설계합니다.

•

사이트 구조 구성: header, nav, main, aside, footer

•

고정/가변/반응형 여부 설정

•

기본 폰트, 색상, 여백 등 전체 스타일 정의

레이아웃에 실질적인 내용을 채워넣습니다.

•

 텍스트 컨텐츠 삽입

메뉴, 공지사항, 바로가기, 푸터 등

•

 이미지 컨텐츠 삽입

1단계에서 제작한 이미지 삽입 (로고, 슬라이드, 갤러리 등)

JavaScript 또는 jQuery 등을 활용해 인터랙션 기능을 추가합니다.

•

 메뉴 슬라이드

상단 메뉴에 마우스를 올렸을 때 하위 메뉴 슬라이드

•

 이미지 슬라이드

자동 또는 수동으로 전환되는 메인 이미지 영역

•

 탭 UI

공지사항 / 갤러리 등의 정보 탭 전환

•

 레이어 팝업

클릭 시 띄워지는 이벤트 팝업창

최종 제출 전 필수 점검 리스트입니다.

•

 용량 제한 확인: 전체 용량 10MB 이하

◦

2025~ : 10MB 이하

◦

~2024 : 5MB 이하

•

 HTML 유효성 검사: validator.w3.org

•

 Console 에러 확인: F12 → Console 탭

•

 기능 작동 확인

◦

이미지 슬라이드

◦

메뉴 슬라이드

◦

레이어 팝업

◦

탭 UI