※ 본 카테고리의 내용은 부스트캠프 챌린지 기간동안 학습한 내용을 바탕으로 정리한 내용입니다.
목차
0. 플로우 차트
플로우 차트(Flow chart)는 프로세스를 수행하기 위한 일련의 단계와 결정을 시각적으로 표현한 자료입니다.
기본적인 형식은 도형과 화살표로 표현이 되며, 각 심볼 별로 다양한 기능을 표현합니다.
하지만 부끄럽게도 저는 저 심볼들을 다 꿰고 있지 않았기 때문에 제가 보기 편한대로 사용하고 있습니다.
물론 이렇게 제가 생각하는 대로 만든다면 미리 어떤 도형이 무엇을 의미하는 지를 표현해 줘야겠죠?
저는 전에 간단한 프로젝트들을 진행하면서 익혔던 draw.io를 사용해서 만들었습니다.
웹에서 간편하게 접근할 수 있고, 따로 로컬에서 저장도 할 수 있어서 굉장히 편리합니다.
Flowchart Maker & Online Diagram Software
Flowchart Maker and Online Diagram Software diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPM
app.diagrams.net
1. 유저 시나리오
유저 시나리오(User Scenario)는 사용자들이 어떻게 행동하는지에 대해 담고 있는 자료입니다.
페르소나를 하나 만들어서 이 페르소나가 자신의 목적을 달성하기 위해 내가 만든 프로그램에서 어떻게 행동하며 어떻게 사용할 지에 대한 시나리오를 그리는 것이죠.
2년 전 가을에 Start Up the Dream이라는 행사에서 UX 디자이너 홍석희 강사님께 배웠던 내용 중 하나이기도 합니다. (이때의 인연으로 멋사 8기때 큰 도움을 받기도 했습니다!! 이 자리를 빌려 정말 감사의 말씀 보내드리고 싶습니다 ㅎㅎ)
사실 원래대로라면 페르소나를 만들고 진행해야 하지만 시간이 마땅치 않은 관계로 간단하게 사람1 사람2와 같은 형식으로 간이 페르소나를 만들고 그 사람들이 어떤 방식으로 우리가 만든 프로그램을 사용할 지에 대해서만 간략하게 적었습니다.
이것도 draw.io를 사용해서 도형과 텍스트박스를 이용해서 간단하게 만들 수 있었습니다.
2. 와이어 프레임
와이어 프레임(Wire Frame)은 웹 페이지의 구조를 제안하기 위한 화면 설계도입니다.
디자인이 만들어지기 전에 선을 이용해서 간단한 윤곽선(Frame)을 잡는 과정입니다.
이 과정을 통해 디자이너가 어떤 형식으로 웹/앱을 구성하려고 하는지 알 수 있고, 콘텐츠에 어떤 기능을 추가해야 할 지, 컨셉은 어떻게 잡을 지에 대한 내용도 담게 됩니다.
딱 보면 알겠지만 개발자와 웹 퍼블리셔, 개발자, 클라이언트가 이 와이어 프레임을 통해 좀 더 원활하게 소통할 수 있게 됩니다.
말로만 설명하는 것보다는 눈으로 보이는 무언가가 있다면 훨씬 낫겠죠?
이 와이어프레임은 Figma를 통해 그렸습니다.
운이 좋게도 올해 초 쿠챌린저스 프로젝트를 진행하면서 열심히 사용했던 경험이 있기 때문에 보다 수월하게 Figma를 사용하자고 말할 수 있었습니다.
저는 플로우 차트와 유저 시나리오 파트를 맡았기 때문에 와이어 프레임까지 담당하지는 않았지만, 사용해보셨던 팀원분께서 잘 만들어 주셔서 좋은 결과물을 얻을 수 있었습니다 :)
Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
www.figma.com
3. 프로토타입
프로토타입(Prototype)은 와이어프레임과 굉장히 유사하지만, 보다 인터렉티브한 경험을 만들어주는 요소입니다.
프로그램이 어떻게 동작하는 지를 보다 상세하게 설정하여 실제로 프로그램이 동작한다면 이런 식으로 작동할 것이라는 것을 눈으로 보여주게 됩니다.
물론 그림으로만 나와있어도 어느 정도 이해할 수 있겠지만, 실제 사용자의 입장이라면 어디서 어떤 후속 동작이 나올 지 보다 구체적이고 현실적으로 다가오게 되므로 꼭 필요한 과정이기도 합니다.
시간이 많지 않아서 복잡한 프로토타입까지는 작성하지는 못했지만, 화면과 화면을 연결하는 수준까지는 구현하였습니다.
정말 짧은 시간이었음에도 고생해주신 팀원분께 감사드립니다 :)
최근댓글