[프로젝트] 3. UI Sketch, Wireframe, 시안 제작하기

들어가기

UI 제작은 UI/UX 디자이너들이 담당하는 경우도 있지만, 상황에 따라 담당자가 없는 경우, 프론트엔드 개발자가 디자인까지 하는 경우도 있다. 데브코스 프로젝트를 비롯하여, 대다수의 교내 프로젝트에서 디자이너가 있는 경우가 드물기 때문에 디자인 툴 활용법을 익히는 것도 좋은 것 같다. 본인이 그림 그리기에 자신이 없다하더라도 디자인 툴을 활용하면 충분히 괜찮은 디자인을 만들 수 있고, 사용법도 간단하다.

현재 유명한 디자인 툴로는 Adobe XD, Photoshop, Illustrator, Figma 등이 있다. 그중 Figma는 무료로 사용가능하고, 협업에 최적화된 툴이라 판단하여 데브코스 프로젝트에서는 Figma를 사용하였다.

피그마 홈페이지

UI Sketch

손으로 직접 대략적인 디자인을 그려보는 작업을 의미한다. 각 페이지 별로 들어갈 요소를 고민해보는 과정이다

(데브코스 프로젝트 당시 작성했던 스케치 자료가 없어 모바일 프로젝트 당시 그렸던 sketch로 대신하였음)

Wireframe

sketch로 그렸던 디자인을 디자인 툴을 사용하여, 뼈대만 그리는 작업을 의미한다. 채색 없이 선과 글씨로만 구성되며, 그림의 경우 X로 대체한다. 지도와 같이 상세한 내용이 요구되는 부분에 한해서 예시 사진을 사용할 수 있다.

시안

wireframe에 채색, 이미지들을 직접 추가하는 과정이다. 실제로 나올 서비스의 최종 디자인이라고 할 수 있다