본문 바로가기

Wireframe

(2)
기획자의 스케치(Sketch), 인비전(Invision) 사용기 슬로워크에서는 스티비라는 이메일마케팅 서비스를 만들고 있습니다. 스티비처럼 서비스를 새로 만들어나가는 단계에서 가장 많이 하는 일 중 하나는 서비스를 만들기 위한 화면을 설계하는 것입니다. 스티비를 만드는 과정은 대략 이렇습니다. 화면 설계의 산출물은 디자인과 개발의 밑바탕이 되는 것이기 때문에 화면 설계 단계에서는 디자이너, 개발자와의 소통이 중요합니다. 그 산출물 또한 디자이너, 개발자가 활용하기 쉬운 형태여야 합니다. 화면 설계의 산출물 중 하나는 와이어프레임(Wireframe)입니다. 와이어프레임이란 단순한 선으로 화면의 레이아웃을 표현하는 것을 말합니다. 더 읽기 > UI, UX 기획을 쉽게, 와이어프레임(Wireframe) 슬로워크에서는 원래 Moqups라는 도구를 사용하고 있었고 스티비 팀에..
UI, UX기획을 손쉽게, 와이어프레임(Wireframe) UI/UX 기획을 할 때 사용하는 와이어프레임(Wireframe)에 대해 들어보셨나요?웹 또는 앱 프로젝트를 진행할 때 필요한 과정 중 하나로 웹 페이지의 구조를 제안하기 위한 화면 설계도입니다. 즉 디자인이 들어가기 전 단계에서, 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 단순한 선과 회색박스들로 보일 수 있겠지만, 디자인의 컨셉, 고객의 요구사항, 콘텐츠들의 기능 요소를 모두 파악하여 전략적으로 설계되어야 하므로 중요도가 높습니다. 또한, 이 와이어프레임이 잘 갖춰져 있어야 디자이너와 웹 퍼블리셔, 개발자 그리고 클라이언트가 서로 원활히 소통할 수 있게 됩니다. 와이어 프레임이 실제 업무에서 사용되는 예시를 살펴보겠습니다. (*주관적인 흐름으로 개인적, 업체별로 다른 프로세스로..