1 단계 : 자료정리 하기 : 1~2일

포트롤리오로 사용할 자료 정리 하기

• 자료 사용여부 판단 자료 정리
• 웹에 업로드 할 자료 분류 (사이트의 메뉴로도 연계가 됨)
• 만약 사용할 자료가 부족하거나 사용계획이 없다면, 사이트 주제를 설정하여 제작
  예) 관광관련사이트, 기업 홈페이지 리뉴얼, 영화홍보 사이트, 책소개 사이트 등, 제품홍보사이트 등...

2 단계 : 와이어프레임 작성하기 : 2~3일

머리속의 생각을 종이에 그려 봅니다.

피그마 도구로 와이어프레임을 작성해 봅니다.

• http://gdweb.co.kr/ 사이트를 참조하세요
• 벤치마크할 사이트를 선정하세요
• 메인 페이지를 그려 보세요
• 서브 페이지도 같이 그려 보세요
• 완성된 와이어 프레임에 설명도 추가 하세요
• 색상계획 및 이미지계획도 같이 합니다
• 최종 와이어 프레임은 피그마로 완성

3 단계 : 웹 설계 도면 만들기 : 5~7일
(Figma & Photoshop & Illustrator)

Prototype Of Digital

• 피그마 또는 포토샵이나 일러스트를 활용하여 와이어프레임을 기준으로 프로토타입을 만들어 보세요
• 메인페이지와 서브페이지 모두를 만듭어야 합니다
• 필요한 내용과 사진도 삽입하여 제작합니다.
• 사진이 필요하면 무료사진 사이트 https://unsplash.com/ 를 참조하세요.
• 피그마의 커뮤니티 또는 포토샵 가이드라인을 최대한 활용합니다
• 프로토타입은 코딩시 기준이 됩니다

4 단계 : 코딩 시작 (HTML&CSS) : 1~2일

코딩의 시작은 레이아웃으로 부터

• 새로운 프로젝트 폴더를 만들고, 폴더 구성을 계획합니다
• 부모 요소 공간 분할
• 부모 요소에 자식요소 공간분할
• position 또는 Floate 사용하여 레이아웃 잡기 또는 flex 또는 grid 사용하여 레이아웃 잡기

5 단계 : 내용 삽입하고 꾸미기 (HTML&CSS) : 5~7일

자리가 정해진 곳에 내용물을 추가

• 네비게이션 추가
• 이미지 추가
• 동영상 추가
• 설명 내용 추가
• 기타 추가 하고 싶은 내용을 추가 합니다

6 단계 : 제이쿼리 준비 및 구상(jQuery) : 1일

스크립트에 제이쿼리 라이브러리를 추가 합니다.(되도록 최신버전을 사용하세요)

• 무엇을 조작할지 또는 제어(Control) 해야 할지 잠시 생각해 봅니다
• 테스트를 통해 작동하는지 확인 합니다

7 단계 : 제이쿼리 작성 및 테스트 (jQuery) : 4~5일

본격적으로 제이쿼리를 작성해 봅시다

• 제이쿼리 구문이 생각이 나지 않으면 책 또는 사이트를 참조해 봅니다
• 사이트는 http://www.w3schools.com 또는 https://developer.mozilla.org/ 을 접속하여 검색합니다

8 단계 : 완 성 (축하합니다) : 1일

나의 서버에 업로드 하기

• FTP를 활용하여 완성된 결과물을 계정에 업로드 하고, 확인 합니다
• 계정 접속시 제일 먼저 찾는 파일은 index.html 이므로 root에는 index.html이 있어야 합니다
• 2단계 부터 7단계까지 자료를 잘 정리하여 두었으면, 이것 또한 하나의 포트폴리오 활용할 수 있습니다. 여러분의 웹제작 단계를 웹에 올려줌으로써, 여려분이 할 수 있는 일들을 좀 더 구체적으로 홍보 할 수 있습니다. 참고 하세요

9 단계(마지막) : 수정 및 보완 : 2~3일

차를 한 잔 마시면서 본인의 사이트를 서핑합니다

• 오류가 있는지 확인합니다
• 트레픽에는 문제가 없는지 계정에 로그인 하여 확인합니다
• 가능 하다면 원하는 도메인으로 연결해 보세요
• 자 이제 모든 작업이 끝났습니다. 취업준비를 완료 하셨습니다