[출근 133일차] 뚝딱뚝딱🛠 와이어프레임(Wireframe)

✋뽀-하(뽀식 하이)

웹 사이트 스토리보드를 정리하느라 주말까지 반납하고 열심히 일한 김뽀식🐥! 메일로 완성된 문서를 보내고 한숨을 돌리고 있는데 자리에서 쓰윽 일어나는 팀장님...

팀장님: (비장한 표정으로) 뽀식님!

뽀식이: 저....저요?

팀장님: 디자인팀에 와이어프레임을 언제쯤 확인할 수 있는지 물어봐 주실래요?

뽀식이: (와이어랑 프레임이요..? 공사장으로 가야 하나요??)

제품을 구성하는 서로 다른 레이아웃을 간단한 모양 만을 사용하여 인터페이스를 시각적으로 묘사한 것.

와이어프레임은 디자이너가 디자인의 현재 진행 상태, 향후 비전, 작업 경로 등을 공유할 때 사용한다. 대부분의 디자인 요소(예: 이미지, 비디오, 텍스트 등)가 포함되기 전 상태이기 때문에 인터페이스에서 생략된 부분은 자리 표시자*를 넣어 표현한다.

*자리 표시자: 이미지와 같이 실제 디자인 요소와 연결된 개체를 표현한 X표 된 상자나 필러 텍스트

[👌와이어프레임으로 확인할 수 있는 것?] 구조(페이지 요소의 구성 방식) 콘텐츠(페이지에 표시될 내용) 기능(인터페이스의 작동 방식)

[👀와이어프레임 툴의 종류] 펜과 종이 프레젠테이션 소프트웨어 (파워포인트, 키노트) 그래픽디자인 소프트웨어 (일러스트, 포토샵) UX 디자인 소프트웨어 등 (스케치, 피그마, Adobe XD)

와이어프레임을 만드는 TIP

간결성: 와이어프레임 제작의 핵심은 속도와 간결성이다. 와이어프레임의 목적은 페이지 디자인의 기본 구조를 보여주는 데 있으므로 와이어프레임은 신속하게 제작되어야 한다. 따라서 세부적인 디자인 작업은 나중에 하는 것이 좋다.

짧고 적절한 주석: 팀원은 와이어프레임을 우선적으로 읽기 때문에 팀에게 와이어프레임을 제공하는 경우 항상 주석을 포함시켜야 한다. 주석은 구조적인 맥락을 생성하고 핵심 아이디어를 신속하게 전달하는 데 도움을 준다.

스토리보드와 프로토타입의 차이점

[스토리보드(Storyboard)]

정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI/UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보다 담겨있는 문서이다.

[프로토타입(Prototype)]