와이어프레임 제작 도전기

와이어프레임이란

와이어프레임과 프로토타입은 UX 디자인과 연결된 두 가지 대표적인 디자인 산출물 두 개념은 상당히 큰 차이가 있다. 모양도 다르고 의미와 용도도 다르다.

와이어프레임은 ’골격’이라고도 한다. 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것이다.

와이어프레임은 이름에서 알 수 있듯이 와이어로 설계된 모양이다. 와이어프레임은 다음을 설명하는 데 사용된다.

• 구조(페이지 요소의 구성 방식)
• 콘텐츠(페이지에 표시될 내용)
• 기능(인터페이스의 작동 방식)

기획자가 와이어프레임을 그린다

개발자가 기능을 이해하고, 디자이너가 디자인 컨셉을 원활하게 잡고, 클라이언트는 요구사항과 원하는 기능이 제대로 전달되었는지를 사전에 확인

와이어프레임의 장점

• 의사 소통의 수단
  • 하나의 그림이 천 마디의 말을 대신합니다. 와이어프레임은 이해 관계자와 팀원에 디자인 의사 결정을 명확히 전달하는 수단이며, 이를 통해 이해 관계자와 팀원들은 앱 또는 웹 사이트가 어떤 화면에 표시되는지 효과적으로 이해할 수 있을 것입니다. 자리 표시자로 채워진 웹 사이트 또는 모바일 앱의 와이어프레임을 통해서도 이해 관계자와 팀원이 디자인이 어떻게 구성될지 파악할 수 있습니다.
• 작업의 기록
  • 와이어프레임은 일반적으로 기능을 참조하기 위한 시점으로 사용됩니다. 디자인 산출물로서, 와이어프레임은 모든 팀원이 동일한 작업 페이지에 있도록 팀 전원과 공유할 수 있습니다.

와이어프레임의 한계

• 와이어프레임은 사용자 테스트용으로는 적합하지 않다.
  • 초기 조사 단계에서 피드백을 수집(일부 빠른 인사이트의 형태로)하는 데에는 유용할 수 있다.
  • 하지만 정적인 상태로 되어 있기 때문에 전반적인 사용자 경험을 평가하기가 매우 어렵다.
• 복합적인 디자인 아이디어를 설명해야 하는 경우 유용하지 않다
  • 애니메이션이 적용된 효과, 복잡한 전환 또는 제스처와 같은
  • 비헤이비어를 명확하게 보여줌으로써 보는 사람의 추측을 배제할 수 있는 하이 피델리티 수준의 인터랙티브한 프로토타입을 사용하는 것이 더 효과적이다

와이어프레임 제작 팁

어도비 블로그 와이어프레임 팁

• 간결성.
  • 와이어프레임 제작의 핵심은 속도와 간결성. 와이어프레임의 목적은 페이지 디자인의 기본 구조를 보여주는 데 있으므로 와이어프레임은 신속하게 제작되어야 합니다. 세부적인 디자인 작업은 나중에 합니다.
• 짧고 적절한 주석.
  • 팀에게 와이어프레임을 제공하려고 하는 경우 항상 주석을 포함시켜야 합니다. 주석은 구조적인 맥락을 생성하고 핵심 아이디어를 신속하게 전달하는 데 도움을 줍니다.
• 피드백 장려.
  • 와이어프레임을 공유하고 팀원의 피드백을 장려
• 와이어프레임 키트 이용.
  • Adobe XD를 위한 무료 와이어프레임 키트입니다.

(Wires 소개 gif)

와이어프레임 도전기

참고한 글 - 화면설계서 (Wireframe)와 기능명세서 (Functional Specification) 다른 블로그 글을 읽고, 대략적인 프로젝트 기획 및 진행의 순서를 파악했다.

• 비즈니스 기획
• 서비스 기획
• 페르소나
• 사용자 시나리오
• 요구사항 명세서
• 화면 흐름도
• 와이어프레임(화면설계서)
• 기능명세서(화면설계서 옆에 화면별로 붙이는 경우가 많다)

Adobe Xd 사용 후기

1. 구성요소는 정말 atomic하게 재사용할 것들만
2. 그룹화를 잘해놓아야 반응형으로 크기 수정하기가 편하다.
3. Wires와 같은 라이브러리 꼭 쓰기
4. 공유기능이 생각보다 파워풀하다
5. 가로 스크롤이 안된다

페이지 수와 기능의 수가 곧 인건비다.

와이어프레임을 만드는 과정에서 기능에 대해서 진짜 필요한지 다시 생각해보게 된다. 왜냐면 되게 시간도 오래걸리고 힘드니까… 그리고 나오는 화면 수와 기능 수만큼 내가 개발해야 하니깐..

저녁 먹고 앉아서 계속 만드는데 대략 6시간 정도 걸린 것 같다. 처음이라서 그룹화나 구성요소 같은거 익히고, 패스 그리는 법도 감 잡고 하느라 시간이 더 걸렸다. 다음에 만들면 1시간 정도는 더 빨리 만들 수 있을 것 같다.

결과물

멘토분의 피드백을 받고, 총 3번의 개선을 거쳤다.

1. 페이지 수와 기능의 수가 곧 인건비이다
   1. 사용자 경험을 해치지 않는 선에서 개발 비용 절감을 고민하기
2. 팝업 메뉴 하나, 플로팅 메뉴 하나에 UX적인 고민이 필요하다

1차적으로 받은 피드백

• 전반적으로 페이지가 많다.
• 2페이지 화면은 메뉴 화면
  • 플로팅버튼으로 왼쪽에서 오른쪽 슬라이딩 방식의 메뉴로 구성하면 그 페이지가 없어도 될 것 같다.
• 일간-주간-전체는 원페이지로 구성하는게 직관적일것 같다
  • 페이지가 많으면 페이지 활용도와 접근성이 떨어진다
• 팝업이 많다.
  • 초기 넣을수 있는 구성이 많지 않을것으로 보인다.
  • 컴포넌트 나열보다 구체적인 항목을 도출해야 db도 설계할수 있다.

메뉴 페이지를 통합하여, 플로팅 메뉴로 만들고 각 화면에서 네비게이션 바 + 드래그로 볼 수 있게 했다. 또한, 화면 변화가 크지 않은 화면 3장을 원페이지로 만들었다. 게시판을 나타낸 화면에 단순히 loren ipsum을 넣지 않고, 실제 데이터로 채우기

2차적으로 받은 피드백

• 팝업은 하나의 공통 플랫폼이다
  • 동일한 내용이 반복적으로 나타날수 있는 것
  • 또는 알려줘야 하는 정보가 있을때 팝업창을 이용

이 관점에서 보면 설정은 팝업이 아니라 페이지로 구성되는 부분이다. 방법적으로 두가지가 될수 있을것 같다. 1 - 화면전환하여 새화면으로 제공 2 - 기존 설정에서 하위 영역 확장형태로 세부 설정이 가능하도록.

기능 상의 피드백

• 사용자 로그인, 회원가입도 만들어야 한다