📌 이 글은 벌써 4년도 넘은 글인데요. Show 2020년 9월 기준으로 최신 내용을 업데이트 했습니다. 아래 링크를 클릭해주세요!
건축물을 짓기 위해서는 구체적인 설계도면이 필요하듯이 웹사이트 또는 모바일 앱 서비스를 제작하기 위해서도 설계도면이 필요합니다. IT 현장에서는 이를 화면 설계라 지칭하며 와이어프레임, 스토리보드, 프로토타입으로 구분하고 있습니다. 국내에서는 파워포인트로 제작한 스토리보드가 표준 설계 방법으로 사용되고 있지만, 보다 원활한 커뮤니케이션을 위해 점차 다양한 툴로 확장되고 있습니다. 알듯 말듯 조금은 헷갈리는 각 용어들이 어떠한 차이가 있는지 살펴보겠습니다. 모바일에서는 핀치 액션(손가락 벌리기)으로 이미지 확대가 가능합니다.와이어프레임(Wireframe)와이어프레임은 화면 단위의 레이아웃을 설계하는 작업입니다. 의사소통 관계자들과 레이아웃을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 사용하며 UI, UX 설계에 집중되어 있습니다.
 스토리보드(Storyboard)디자이너/개발자가 참고하는 최종적인 산출문서로써 정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 문서입니다. 현업에서는 해당 문서를 바탕으로 커뮤니케이션을 진행합니다.
[완료][1차개편]_060821_회원제재처리_관련_수정_기획.ppt 다운로드 프로토타입(Prototype)프로토타입은 실제 서비스와 흡사한 모형을 만드는 작업입니다. 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 인터랙션(동적 효과)을 적용함으로써 실제 구현된 것처럼 시물레이션 할 수 있으며, 단시간에 구현이 가능하기 때문에 사용자 경험에 대한 테스트를 진행해볼 수 있습니다. 이를 통해 설계 단계의 리스크를 사전에 예방할 수 있습니다.
각 용어에 대해 정리가 되셨나요? 저 개인적으로는 약 5년 전부터 Axure 툴을 활용해 스토리보드와 프로토타입이 혼합된 형태의 설계 문서를 제작하고 있고 매우 만족하고 있습니다. 굳이 Axure가 아니더라도 다양한 프로토타이핑 툴이 있으니 화면 설계를 담당하는 기획자 또는 UX 디자이너라면 스토리보드와 더불어 프로토타이핑 스킬도 갖추기를 적극 권장합니다. 📌 이 글은 벌써 4년도 넘은 글인데요. 2020년 9월 기준으로 최신 내용을 업데이트 했습니다. 아래 링크를 클릭해주세요!
프로덕트 매니저와 기획자의 메인 업무 중 하나는 UI 설계입니다. 이를 업계에서는 화면설계서, 화면정의서, 스토리보드, MMI(Man Machine Interface)등 다양한 이름으로 부르고 있는데요. 고놈이 고놈이라고 이해하시면 됩니다. 화면설계서는 대부분 파워포인트(키노트)로 제작합니다. 저도 주니어 시절에는 2년간 PPT 설계를 정말 열심히 했는데요. 그때는 설계 문서가 대외비이기도 하고 내 노하우를 남들에게 알려주기 싫어서 꽁꽁 싸매 놓고 있었습니다. 하지만 PPT 설계를 안 한 지도 어느새 10년이 넘었고 공개 가능한 내용도 있어서 문서 몇 개를 짜깁기해서 샘플 설계서를 만들어봤습니다. 이미 현업에 계시는 분들은 다 아실 내용이라 주니어 레벨에서 참고해보시면 좋겠습니다. 1. 표지모든 문서의 첫 페이지는 표지로 시작합니다. 2. 목차문서의 전체 순서를 간단히 정리합니다. 한글로 작성해도 되지만 많은 분들이 타이틀은 영어로 작성합니다. 영어로 작성하면 좀 더 있어 보이거든요 ^^;; 3. 히스토리현재 문서의 버전과 히스토리를 정리합니다. 개발자들은 깃허브를 통해 그동안의 코드 변경내용을 상세히 알 수 있지만, 파워포인트 문서는 파일로 주고받다 보니 서로의 버전이 꼬일 수도 있고 변경내용을 추적하기가 어렵습니다. 그렇기 때문에 문서 앞부분에는 그동안의 변경내용과 문서 버전을 꼭 기록해야 합니다. 4. 메뉴 구조 (사이트맵)제품의 전체 구조를 시각화합니다. 설계 문서를 여럿이 작업하는 경우에는 메뉴 기준으로 업무 범위를 나눌 수도 있고, 문서 양이 많은 경우에도 메뉴 구조별로 쪼개면 나중에 취합하기에도 좋습니다. 5. 화면 목록문서에 담긴 화면 목록을 정리합니다. IA(InformationArchitecture)와 비슷하다고 보면 되는데 개발자와의 커뮤니케이션을 위해 Screen ID를 표기하기도 합니다. 맨 우측 열에는 페이지별 참고사항을 정리하는데 페이지가 삭제되거나 분리되었을 때 해당 행을 완전히 삭제하기보다는 아래 화면처럼 취소선과 비고를 적절히 활용하면 전체 히스토리를 파악할 수 있어서 좋습니다. 6. 설계위에서 문서의 전체적인 개요를 정리했다면 이제부터는 본격적인 설계 내용을 포함합니다. 6-1 플로우차트설계 화면이 간단한 경우에는 굳이 플로우차트를 만들지 않아도 됩니다. 하지만 복잡해질수록 플로우차트를 먼저 정리하고 시작하기를 권장하는데요. 플로우차트를 그릴 때는 [페이지]는 네모로, [프로세스]는 평행사변형, [분기]는 마름모 도형을 사용하면 됩니다. 시작과 끝은 [배경색]을 주면 좀 더 명확합니다. 한 가지 팁을 드리면 [비밀번호 찾기] 우측의 화면처럼 해당 페이지에서 필요한 필드 값을 함께 정리해두면 뒤에서 UI를 그릴 때 큰 고민 없이 바로 시작할 수 있습니다. 또한 얼럿 메시지도 눈에 띄게 표현해주면 좋습니다. 6-2 기본 정책플로우차트와 정책은 세트로 묶어서 한 흐름에 이어가면 좋습니다. 플로우차트에서 담지 못한 내용은 정책 문서로 따로 분리해서 각 항목에 대한 고민사항과 결정사항을 정리합니다. 6-3 권한 정책프로젝트 성격에 따라 권한 설계가 필요한 경우도 있고 불필요한 경우도 있습니다. 아래 화면은 권한 정책에 대한 예시인데요. 행은 [페이지]와 [사용자 그룹]으로 쪼개고, 열은 [CRUD]로 쪼개면 한눈에 들어와서 보기 좋습니다. 페이지에 따라 특정 기능을 사용할 수 없는 경우에는 명확하게 Block처리를 해주면 좋습니다. 6-4 UI 설계UI 설계 화면은 이미 익숙하실 거라 생각합니다. 상단 영역에는 화면 목록에서 정리한 내용을 담고, 왼쪽 영역에는 UI를, 우측 영역에는 각 번호에 해당하는 디스크립션을 정리합니다. 디스크립션 작성 팁 중 하나는 아래 화면처럼 [Description], [Check Point], [Related ID]와 같이 성격에 따라 영역을 구분하면 좀 더 깔끔하게 정리할 수 있습니다. 모바일 설계도 같은 방식으로 진행하면 됩니다.
유효성 검사 디스크립션 작성 팁! 설계를 하다 보면 [필수 입력항목]과 [유효성 체크] 시나리오도 정리해야 하는데 우측 공간이 너무 좁은 경우에는 디스크립션을 작성하기가 불편합니다. 이 때는 별도 페이지로 분리해서 아래 화면처럼 [상황, 문구, 처리 시나리오]를 표로 만들어서 정리하면 작성하기도 쉽고 개발자들이 보기에도 훨씬 좋습니다 ^^ 7. 마무리마지막 페이지는 Thank you 혹은 EOD(End of Document) 텍스트로 마무리하면 됩니다. 표지 화면과 디자인 스타일을 비슷하게 유지하면 좋습니다. 네, 여기까지 화면설계서의 구성요소를 간단히 정리해봤습니다. 한 가지 빠진 부분은 '모바일 제스처'라던지 '얼럿 메세지 스타일', '게시판 작동방식' 등 문서에서 공통으로 사용되는 내용은 앞 부분에 함께 정리하면 좋습니다. 강의 영상글에서 담지 못한 내용은 영상으로 정리했으니 이해가 어려우신 분들은 영상도 함께 참고해주세요! ^^ |
Ui 스토리보드 예시 - ui seutolibodeu yesi
관련 게시물
저작권 © 2024 ko.paraquee Inc.
