전통적인(?) 웹사이트 제작 방식

1. 기획
   • 기획자 혹은 PM(Product Manager)이 의뢰를 받고, 클라이언트와 접선합니다.
   • 미팅을 통해 제작 방향과 지향점을 의논하고 자료를 전달받습니다.
   • 전달받은 자료를 토대로 웹사이트를 기획하고 간단한 프로토타이핑을 진행합니다.(와이어프레임등)
2. 디자인
   • 기획자에게 전달받은 사항을 토대로 Photoshop / Illustrator 등의 그래픽툴을 사용해 웹 사이트 시안을 디자인 합니다.
   • 이 때 메인 화면 디자인을 기본 디자인으로 삼으며, 보통 2~3개의 각기 다른 디자인을 제작한 다음 클라이언트와 조율합니다.
3. 퍼블리싱
   • 클라이언트 컨펌이 끝난 시안을 전달받아 HTML, css, js를 사용하여 사용자가 실제로 이용하게 되는 웹사이트 화면(view)를 제작합니다.
   • 이 때 javascript는 jQuery 를 많이 사용합니다.
   • jQuery는 javascript를 쉽게 사용하게 해주는 라이브러리(간단한 프로그램) 입니다.
4. 프로그래밍
   • 퍼블리싱이 끝나고 나면 PHP, Java, Python 등의 언어를 사용하여 프로그래밍을 진행합니다.
   • 회원가입 및 로그인 시스템, 쇼핑몰 시스템 등을 제작합니다.
   • 전달받은 데이터를 보관하고 핸들링하기 위하여 데이터베이스 작업도 진행합니다.

최근의 웹사이트(웹앱) 제작 트랜드

1. 기획 및 UX 설계
   • 웹의 목적을 분류하고 분석합니다. (기존 시스템 분석 / 사용자 리서치 등)
   • 수집하고 분석한 자료를 토대로 UX를 설계하고 그 결과를 프로토타이핑 합니다.
     • Work-flow
     • Storyboard
     • Prototype
2. UI 디자인

   • 설계된 바를 토대로 시안을 디자인합니다.

   • 이 때 photoshop, illustrator 뿐만 아니라 다양한 페이지를 쉽게 제작하고 연동할 수 있는

     Figma, xd등을 사용하여 시안을 제작합니다.

     • figma, xd, sketch 는 프로덕트 디자인을 위한 각종 편리한 툴들을 제공합니다.
     • 기존에 photoshop, illustrator 를 사용하던 사용자라면 금방 빠르고 쉽게 배울 수 있습니다.
3. Front-end Programming
   • UI디자인이 끝난 시안을 넘겨받아 컴포넌트 단위로 view를 제작합니다.
   • 넘겨받은 데이터를 view에 로드하는 시스템을 만듭니다.
   • 제작한 컴포넌트들을 랜딩합니다.
   • 이 때, javascript 기반이 되는 프레임워크나 라이브러리를 많이 사용합니다. (react, vue, angular 등)
4. Back-end Programming
   • 스트리밍 기능, 로그인 기능, 회원가입 기능 등 실질적으로 구동되는 프로그램들을 제작합니다.
   • Java, Python, C 등의 언어를 사용합니다.
   • DB를 구축하고 데이터 관리 환경을 만듭니다.