당신은 주제를 찾고 있습니까 “ui 스토리 보드 – UX/UI기획 기초 11강 UI 스토리보드 작성과 UI 상세설계 가이드 | T아카데미“? 다음 카테고리의 웹사이트 you.tfvp.org 에서 귀하의 모든 질문에 답변해 드립니다: you.tfvp.org/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 SKplanet Tacademy 이(가) 작성한 기사에는 조회수 9,904회 및 좋아요 152개 개의 좋아요가 있습니다.
ui 스토리 보드 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 UX/UI기획 기초 11강 UI 스토리보드 작성과 UI 상세설계 가이드 | T아카데미 – ui 스토리 보드 주제에 대한 세부정보를 참조하세요
T아카데미 UX/UI기획 기초 강의입니다.
1강 사용자경험(UX)의 개념과 이해
2강 모바일앱 환경의 이해와 UX의 중요성
3강 사용자 인터페이스의 개념과 이해
4강 사용자 인터랙션(Interaction) 디자인 이해
5강사용성의 이해와 사용성 평가의 활용
6강 사용자중심디자인(UCD)
7강 UX 시나리오
8강 사용자분석 방법론
9강 페르소나와 사용자모델링 방법론
10강 UX 기획 및 컨셉메이킹 방법론
11강 UI 스토리보드 작성과 UI 상세설계 가이드
– UI 스토리보드의 정의와 목적
– UI 스토리보드의 구성요소
– UI 상세 화면 설계(Skeleton) 방법론
12강 UI 디자인 패턴과 UI 가이드문서 작성
이 밖에 다양한 IT 강좌를 T아카데미 홈페이지(tacademy.sktechx.com) 및 유투브 채널 (Sktechx Tacademy)에서 만나보실 수 있습니다.
ui 스토리 보드 주제에 대한 자세한 내용은 여기를 참조하세요.
12. UI 스토리보드 작성과 UI 상세설계 가이드 – cmos00
스토리보드(Storyboard)의 이해. – Storyboard란, UX구현에 수반되는 사용자와 목표, 인터페이스 간 상호작용을 시각화하여,.
Source: cmos00.tistory.com
Date Published: 6/17/2021
View: 3057
초보자를 위한 스토리보드 작성 팁 – 요즘IT
스토리보드란 서비스 개발을 위한 협업 도구로 다양한 변수를 고려하여 화면을 구성하고, 각기 화면의 동작과 전환을 확인하는 기획 문서입니다.
Source: yozm.wishket.com
Date Published: 11/21/2022
View: 840
와이어프레임, 스토리보드, 프로토타입의 차이점 :: 기획자 데이먼
디자이너/개발자가 참고하는 최종적인 산출문서로써 정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축 …
Source: yslab.kr
Date Published: 3/6/2021
View: 228
UI정보구조 설계 / 4. 스토리보드 흐름 구체화 – HAANAA_W
스토리보드는 앱을 개발하기 위한 기초 설계 도면으로 디자이너 및 개발자가 참고하는 최 종적인 산출문서라고 할 수 있다. 화면 구성이 어떻게 보여 질것이며 다음 화면이 …
Source: haanaaedu.tistory.com
Date Published: 11/29/2021
View: 7751
기획자는 화면 설계(Story Board, U.I., WireFrame)로 말한다.
스토리보드, Story Board, User Interface, U.I. 외국 에이전시들은 Wire-Frame이라고도 한다.] IT 분야에서 밥을 먹는 우리들는 종종 그런 이야기를 한다 …
Source: philosophiren.com
Date Published: 11/18/2022
View: 8199
[기획#3]스토리보드(화면설계서) 작성법-템플릿제공
기획자가 작성한 스토리보드는 프로젝트를 수행하는 동안 개발자와 디자이너의 소통의 도구가 됩니다. 아이디어 단계에서는 각자의 머리속의 서로 다른 …
Source: m.blog.naver.com
Date Published: 1/18/2022
View: 5576
주제와 관련된 이미지 ui 스토리 보드
주제와 관련된 더 많은 사진을 참조하십시오 UX/UI기획 기초 11강 UI 스토리보드 작성과 UI 상세설계 가이드 | T아카데미. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 ui 스토리 보드
- Author: SKplanet Tacademy
- Views: 조회수 9,904회
- Likes: 좋아요 152개
- Date Published: 2017. 10. 8.
- Video Url link: https://www.youtube.com/watch?v=5jZnmxv5sVE
12. UI 스토리보드 작성과 UI 상세설계 가이드
1. 스토리보드(Storyboard)의 이해
– Storyboard란, UX구현에 수반되는 사용자와 목표, 인터페이스 간 상호작용을 시각화하여,
개발자/디자이너와의 의사소통을 돕는 도구이자, 완성해야 할 앱서비스와 예상되는 사용자경험을
미리 보기 위한 방법론
2. UI 스토리보드의 목적
– 모바일앱에 필요한 기능 조각들 간 관계의 설계
– 앱 설계에 필요한 조각들을 모아서 순서대로 놓고, 배치해보고, 쌓아서 조립하는 과정
– 실제 개발 단계에서 발생할 수 있는 문제점을 미리 발견하고 대처하기 위한 과정
– 사용자 시나리오를 시각화하면서 평가하는 과정
– 사용자 Task에 따른 세부적인 기능들 간의 흐름과 관계망을 파악
– 개발자와 사용자 간의 피드백을 받으면 스토리보드를 재정비
3. UX 스토리보드의 구성요소
– Feature list : UX concept/UX Needs의 구현에 필요한 기능 리스트
– User Task-flow : 해당 기능수행과 사용자의 행위 매핑 및 흐름도
– Information Architecture(IA) : 정보의 구조화와 위계관계망(우선순위)
– Wireframe : 해당기능 구현을 위한 인터페이스 요소의 배치와 화면 구조
– Workflow : 여러 개의 와이어프레임 또는 개별 기능 간 화면 전환 흐름도
4. UI 상세 화면 설계 프로세스
1) UI feature 리스트 작성 단계
– UI 구현에 수반되는 앱시스템, 서비스, 장치 등 인터페이스 Feature 목록 나열하고 앱 개발에
필요한 기능들을 추출하고 우선순위를 정의하는 단계
– 사용자의 Needs를 충족시키기 위한 앱의 기능들을 나열
– 우선순위 설정 방법에 따라 기술된 기능의 우선순위를 정함
– 기능간의 포함관계를 고려하여 삭제 및 추가
– 정의된 기능들에 대해 우선순위를 설정
2) User Task-Flow 작성 단계
– 기능수행을 위한 사용자의 행위 순서(흐름)로 나열하고 검증하는 단계
3) Process Diagram 작성 단계
– 각 기능들 사이 관계(조건과 실행)를 정립하여 구조화하는 단계
4) IA(Information Architecture) 구조화 단계
– 각 기능들을 정보의 위계와 관계망으로 구조화
5) Wireframe 설계 단계
– 해당기능 구현을 위한 인터페이스와 실제 화면에 그림
6) Workflow 설계 단계
– 화면전환 및 화면 간 상호작용 및 시뮬레이션
초보자를 위한 스토리보드 작성 팁
<출처 : pexels>
스토리보드란 서비스 개발을 위한 협업 도구로 다양한 변수를 고려하여 화면을 구성하고, 각기 화면의 동작과 전환을 확인하는 기획 문서입니다. 이번 글에서는 UI 스토리보드에 들어가야 할 필수 구성 요소를 짚어보고, 효과적인 작성 팁을 알려드립니다.
스토리보드, 필수 구성 요소
<출처 : freepik>
1) Document history(작업 이력)
파워포인트로 작성된 UI 스토리보드의 맨 앞장에 업데이트한 내용과 반영된 페이지, 날짜, 수정한 사람에 대해 서술합니다. 신규 장표가 발생하거나 수정/변경된 경우, 해당 장표에 이 딱지를 붙인 후, 상세 변경 내용을 작성합니다.
2) Contents(목차)
넘버링 혹은 Bullet형태로 스토리보드의 목차를 작성한 후, 개별 목차에 해당 슬라이드를 하이퍼링크로 연결하여 쉽게 특정 페이지에 접근할 수 있도록 합니다.
3) Overview(개요)
책은 서문과 목차 소개 이후 본문으로 이어집니다. 논문도 Objective(목표), Goal(목적), 그리고 Value(비즈니스의 가치)에 대해 먼저 명확하게 밝히고 연구 결과를 알려줍니다. 마찬가지로 UI 스토리보드의 앞 장에 개발하려는 시스템 혹은 서비스에 대해 간략히 명시합니다. 처음 이 문서를 접하는 분들의 이해도를 높일 수 있습니다. 주로 서비스의 대상과 사용자에게 어떤 서비스를 전달하는지 알리고 정확한 개발 범위를 명시합니다.
4) 화면 ID
각 SB[1]의 ID를 부여한 테이블을 문서 앞장에 배치합니다. 그리고 각 UI 화면 정의와 동작 흐름도를 보여주는 페이지에 해당 SB의 ID를 붙여줍니다. 화면 ID를 부여하면 개발자가 페이지 전환을 쉽게 확인할 수 있으며 페이지가 추가되어도 기획서에 별도 작업이 필요하지 않습니다. (예를 들어 화면 ID가 아닌 기획서의 쪽수를 기준으로 작업할 경우, 작업 중간에 신규 페이지 추가 시 추가된 페이지만큼 변경된 기획서의 쪽수에 맞추어 디스크립션 재작업이 필요합니다.)
5) IA/Manu structure
IA 혹은 메뉴 구조도는 서비스가 제공하는 메뉴 혹은 기능을 보여주므로 간략하게 한 장으로 정리하여 스토리보드 앞 장에 배치합니다. 비교적 볼륨이 많은 서비스를 제공할 경우, 엑셀에 뎁스 명시와 페이지 ID, 페이지 형태(ex. 팝업 혹은 페이지), 디자인과 퍼블리싱 여부 등을 자세히 기술하지만 서비스 볼륨 상관없이 UI 스토리보드에서는 각 메뉴 혹은 정보의 레이블링과 구조감 그리고 간단한 디스크립션만 제공합니다.
6) UI Flowchart
기획자가 그리는 UI Flowchart는 각 화면의 전환과 흐름을 확인합니다. Wireframe과 상세 설명을 포함하는 개별 기획 장표는 서비스의 전체 흐름을 확인하기 어려운 관계로 화면 설계서 이전에 섹션을 추가하여 UI의 프로세스 혹은 흐름도를 정리합니다. 문서를 처음 읽는 사람들은 서비스의 흐름도를 쉽게 파악할 수 있습니다. 더불어 흐름도를 구성하는 요소들이 어떤 의미인지 알 수 있는 범례를 제공하여 문서를 확인하는 이의 혼동을 줄이도록 합니다.
7) 정책
개발을 위한 기획 문서이므로 단순하게 화면 설계서와 동작에 대한 명시만 간략하게 기술하는 기획자분들도 계십니다. 하지만 보통 아래와 같은 사항을 명시합니다. 개발 구현을 수월하게 하기 위함도 있지만, 추후 지속적으로 관리되고 참고될 것이기 때문입니다. 정책은 화면 설계서 혹은 시나리오에 상세 정의에 추가하거나 서비스 공통적인 정책이라면 공통 화면 혹은 공통 레이아웃과 동일하게 스토리보드 앞부분에서 제공합니다.
시스템 연동 : 응답 코드, 응답 코드명, 응답 메시지에 대한 내용이 테이블 형태로 보입니다.
: 응답 코드, 응답 코드명, 응답 메시지에 대한 내용이 테이블 형태로 보입니다. 정보 노출 정책 : 같은 화면이라도 사용자 액션에 따라 정보가 추가로 보입니다. 각 케이스 별로 노출될 수 있는 정보와 상태 값을 화면으로 그리거나 테이블 형태로 정리하여 안내합니다. 케이스가 다양하지 않거나 레이아웃이 이해하기 어려운 경우, 직접 화면을 그리고, 정보의 양이나 케이스가 많은 경우, 테이블 형태로 정리해 주면 좋습니다.
: 같은 화면이라도 사용자 액션에 따라 정보가 추가로 보입니다. 각 케이스 별로 노출될 수 있는 정보와 상태 값을 화면으로 그리거나 테이블 형태로 정리하여 안내합니다. 케이스가 다양하지 않거나 레이아웃이 이해하기 어려운 경우, 직접 화면을 그리고, 정보의 양이나 케이스가 많은 경우, 테이블 형태로 정리해 주면 좋습니다. 준법 사항 : 예컨대 모빌리티 서비스는 국토교통부가, 금융 서비스는 금융감독원에서 내려오는 준수 사항이 있습니다. 해당 사항을 함께 명시합니다.
: 예컨대 모빌리티 서비스는 국토교통부가, 금융 서비스는 금융감독원에서 내려오는 준수 사항이 있습니다. 해당 사항을 함께 명시합니다. 계산 산출 근거: 청구서는 과세 근거와 배기량 배출량에 따른 세액 계산을 명시하고, 운동량 체크가 필요한 서비스는 칼로리 소모량의 산출 공식을 제공합니다.
스토리보드, 화면 그리는 법
< Ref. freepik >
1) UI화면 그리기
① 규격과 영역 잡기
<출처 : 피그마 프레임>
피그마에서는 상단 프레임 메뉴를 선택하면, 화면 우측에서 디바이스 별 프레임 규격이 노출됩니다. 간단히 원하는 규격을 클릭 혹은 드레그 및 드롭 시, 원하는 규격의 캔버스로 작업이 시작됩니다. PPT에서 작업할 때는 기존에 출시된 서비스 화면의 이미지를 캡처하여 백그라운드로 두고 UI 영역의 크기의 정하는 걸 추천합니다. 반응형 웹인 경우 각 Desk mode, Tablet mode, Mobile landscape mode, Mobile Portrait mode의 표준 해상도를 정하고 각 모듈의 UI 레이아웃의 변화를 그려줍니다.
② 콘텐츠 영역
보통 이미지는 회사에서 결제한 사이트에서 다운로드하거나 포털 검색을 통해 가져와서 씁니다. 이때 검색으로 가져온 이미지는 꼭 출처를 남겨둬야 합니다. UI에 삽입되는 텍스트는 너무 작거나 크지 않게 사용합니다. 서비스 타깃에 따라 텍스트 크기를 키울 수 있지만 PPT 기준으로 최소 5.5pt 이상 사용합니다. 단, 자간 행간 등 텍스트 가독성 측면을 디자인 관점에서 깊게 고민할 필요는 없습니다. 사용자가 이해하기 어려운 용어가 있을 때는 설명을 하는 문구가 별도로 삽입되기도 합니다. Default로 노출되거나, 도움말을 눌러 말풍선 형태로 표시됩니다. 특히 금융 용어가 어려운 관계로 금융 서비스에서 종종 찾아볼 수 있습니다.
③ 기본 화면과 변수
각 앞장에 그려질 화면은 고정값으로 일반적으로 보일 화면을 그려주고 각 케이스 별로 그려질 그림은 화면 옆에 그리거나 장표를 추가하여 그립니다.
2) UI Scenario 그리기
모든 동작 흐름도를 그리는 일이 번거롭더라도 핵심 프로세스는 별도로 그려 제안하는 것이 좋습니다. 물론 계약 시 필수사항으로 스토리보드에 삽입해야 하는 경우도 있습니다. 사용자 액션에 따라 노출되는 팝업과 화면의 전환의 흐름을 파악하기에 용이합니다. UI Flowchart는 단순 레이블링으로 서비스의 흐름을 파악한다면, 이번엔 화면 그림을 넣어 흐름을 파악하는 작업입니다. 작성 방법은 간단합니다. 각 화면의 기능성을 가지고 있는 모든 버튼을 선택했을 때 어떤 수행이 일어나는지 연결하는 것입니다. 액션 버튼 혹은 특정 콘텐츠 영역을 선택 시, 팝업이 호출되거나 화면이 전환되거나 혹은 특정 기능이 수행되는 등 어떤 결괏값이 수반될 것입니다.
<출처 : 잼 페이스>
공수가 많이 드는 작업이지만 이 작업을 통해 서비스의 이해가 쉬워지기 때문에 고도화되어 있어 파악이 어려운 서비스인 경우 직접 그려보며 기존 서비스를 파악하면 좋습니다.
스토리보드, 작업 효율성 높이기
<출처 : freepik>
1. 반복되는 화면 작업을 줄입니다.
기본 UI 레이아웃은 문서 초기에 별도 장표로 명시합니다. UI 레이아웃은 기본 골격에 해당합니다. 서비스에서 주로 사용할 UI 유형을 선택하여 정의합니다. 공통 화면, 예를 들어 주소 찾기, 단말의 사진 선택하기, 날씨 연동 프로세스와 같이 서비스의 하위 문서 혹은 한 개의 서비스 내에서 반복되어 사용될 화면과 프로세스는 공통 화면 섹션을 분리하여 한 번만 명시합니다. 디스크립션 작성과 상세 케이스 서술 작업을 줄입니다.
2. 직접 만드는 것 대신 이미 제공되는 UI 소스를 활용합니다.
구글 혹은 네이버, Bing 검색 시, UI소스나 템플릿을 다운로드할 수 있는 서비스가 많습니다. 이미지 사이트에서 UI 세트를 유료 구매하여 사용하거나 Power mockup을 설치하여 소스를 직접 만들지 않고 각 영역에 배치하여 기획하면 작업이 빠르고 편합니다. UI 화면뿐만 아니라, 플로차트 흐름도 kit도 쉽게 다운로드하여 활용하실 수 있습니다.
※ 참고 링크
https://www.flaticon.com/free-icon/structure_1208803
https://creately.com/creately-for-windows/
https://www.powermockup.com/
3. 기획 작업 툴 선정에 심사숙고하여 선택합니다.
<출처 : 파워포인트, 피그마>
기획 작업 툴이 다양해진 만큼 선택지가 많아졌습니다. 기존에는 파워포인트로 UI 가이드라인, UI시나리오, 서비스 기획, 서비스 사용자 매뉴얼 작업등이 이루어졌고 엑셀로 화면 목록, IA(메뉴 구조도), 기능 정의서 작업이 이루어졌습니다. 물론 정답이 있지는 않습니다. 기획자에 따라 UI 동작 가이드나 UI 플로우를 엑셀에서 작업하는 경우도 있습니다.) 현재는 기획자가 피그마로 작업을 하거나 디자이너가 스케치에서 작업을 한 후, 기획 문서 없이 개발로 진행하는 경우도 있습니다.
한 프로젝트 내 팀원들이 각기 편한 작업 툴로 기획하는 경우, 프로젝트 관리 차원에서는 일관성이 떨어질 수 있습니다. 그래서 불필요한 작업을 필요로 할 수 있습니다. 중복 업무가 발생하지 않도록 프로젝트 시작 시, PM 및 PL과 적절한 커뮤니케이션을 통해 작업 툴을 명확히 한 다음 기획 업무를 시작합니다. 파워포인트는 기존 기획자, 개발자들에게 가장 익숙한 방법으로 보안 관리 측면에서도 좋은 평가를 받고 있습니다.
반면에 피그마는 공유와 접근성, 규격 그리기, 레이어 수정 측면에서 반복 작업을 줄게 하는 등의 이점이 있으나, 개발을 위한 디스크립션 작업 측면에서 효과적이지 않고 해당 툴 사용이 익숙하지 않은 기획자, 개발자들이 아직 많습니다. 그래서 MVP 프로젝트나 제안 성격의 기획안을 제안드릴 경우, 피그마로 기획을 권유합니다. 또한 기획 운영 측면에서 기존 서비스 문서가 파워포인트로 관리되고 있거나 팀원 대부분이 피그마 사용이 익숙하지 않은 상태에서 단기간 내 빠르게 기획 작업을 마쳐야 하는 경우 파워포인트로 작업을 추천합니다.
SUMMARY
스토리보드에 들어가는 목차에는, UI 화면 정의 외에도 Document history(작업 이력), Contents(목차), Overview(개요), 화면 ID, IA/Manu structure, UI Flowchart, 정책을 포함한다. 스토리보드의 작업 효율성 높이기 위해, 가능한 반복되는 화면 작업을 줄이도록 노력하고, UI 요소를 직접 만드는 것 대신에 기존에 제공되는 UI 소스를 활용한다. 마지막으로 프로젝트의 여러 상황을 고려하여 기획 작업 툴을 선정하고 작업을 시작한다.
[1] SB : Story board의 약자입니다.
[웹 기획] 화면 설계 용어 – 와이어프레임, 스토리보드, 프로토타입의 차이점
📌 이 글은 벌써 4년도 넘은 글인데요.
2020년 9월 기준으로 최신 내용을 업데이트 했습니다. 아래 링크를 클릭해주세요!
건축물을 짓기 위해서는 구체적인 설계도면이 필요하듯이 웹사이트 또는 모바일 앱 서비스를 제작하기 위해서도 설계도면이 필요합니다. IT 현장에서는 이를 화면 설계라 지칭하며 와이어프레임, 스토리보드, 프로토타입으로 구분하고 있습니다. 국내에서는 파워포인트로 제작한 스토리보드가 표준 설계 방법으로 사용되고 있지만, 보다 원활한 커뮤니케이션을 위해 점차 다양한 툴로 확장되고 있습니다. 알듯 말듯 조금은 헷갈리는 각 용어들이 어떠한 차이가 있는지 살펴보겠습니다.
모바일에서는 핀치 액션(손가락 벌리기)으로 이미지 확대가 가능합니다.
와이어프레임(Wireframe)
와이어프레임은 화면 단위의 레이아웃을 설계하는 작업입니다. 의사소통 관계자들과 레이아웃을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 사용하며 UI, UX 설계에 집중되어 있습니다.
와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
UXPin 이미지 참조
스토리보드(Storyboard)
디자이너/개발자가 참고하는 최종적인 산출문서로써 정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 문서입니다. 현업에서는 해당 문서를 바탕으로 커뮤니케이션을 진행합니다.
스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등
야메의 이상한 생각과 공감 – 스토리보드 이미지 [완료][1차개편]_060821_회원제재처리_관련_수정_기획.ppt 다운로드
프로토타입(Prototype)
프로토타입은 실제 서비스와 흡사한 모형을 만드는 작업입니다. 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 인터랙션(동적 효과)을 적용함으로써 실제 구현된 것처럼 시물레이션 할 수 있으며, 단시간에 구현이 가능하기 때문에 사용자 경험에 대한 테스트를 진행해볼 수 있습니다. 이를 통해 설계 단계의 리스크를 사전에 예방할 수 있습니다.
프로토타이핑 툴 : HTML/CSS, AXURE, INVISON, Flinto, FRAMER, UXPin, 네이버 프로토나우, 카카오 오븐 등.
: HTML/CSS, AXURE, INVISON, Flinto, FRAMER, UXPin, 네이버 프로토나우, 카카오 오븐 등. 애플워치 프로토타입 데모 : http://8gfcti.axshare.com/#c=2
http://8gfcti.axshare.com/#c=2 그 외 프로토타입 데모 : http://bit.ly/1XyRB33
각 용어에 대해 정리가 되셨나요? 저 개인적으로는 약 5년 전부터 Axure 툴을 활용해 스토리보드와 프로토타입이 혼합된 형태의 설계 문서를 제작하고 있고 매우 만족하고 있습니다. 굳이 Axure가 아니더라도 다양한 프로토타이핑 툴이 있으니 화면 설계를 담당하는 기획자 또는 UX 디자이너라면 스토리보드와 더불어 프로토타이핑 스킬도 갖추기를 적극 권장합니다.
📌 이 글은 벌써 4년도 넘은 글인데요.
2020년 9월 기준으로 최신 내용을 업데이트 했습니다. 아래 링크를 클릭해주세요!
반응형
4. 스토리보드 흐름 구체화
스토리보드 흐름 구체화
와이어프레임에 기반을 두어 표현되는 정보와 기능에 따른 상세 스토리보드 흐름 (flow)을 기획할 수 있다.
스토리보드의 정의
1. 스토리보드의 구성
스토리보드는 앱을 개발하기 위한 기초 설계 도면으로 디자이너 및 개발자가 참고하는 최 종적인 산출문서라고 할 수 있다. 화면 구성이 어떻게 보여 질것이며 다음 화면이 어떻게 전개될지 알려주는 것으로 각 화면에 대한 화면 정의서, 기능 정의서, 데이터베이스 연동 등 구축을 위한 모든 정보가 담겨 있는 문서이다. 앱 서비스 제작의 단계에서 스토리보드 는 실제 제작의 전단계이며 요구 분석, 정보구조 설계, 서비스 흐름도 작성 후 최종 문서 로서 해당 문서를 바탕으로 커뮤니케이션을 하게 된다.
2. 스토리보드 작성 단계
(1) 앱의 설명 및 개요
문서 명, 개정 이력, 디렉토리, 작성일자, 업데이트 기록, 기재해야 할 중요사항 등 앱 에 대한 전반적인 개요를 명시한다. 앱의 주요 목적과 타깃, 어떠한 기능을 제공하는 앱 인지 가장 핵심적인 콘셉트만 대표 화면과 함께 요약해서 작성한다.
(2) 시스템 구성도(system configuration diagram)
앱의 형태가 연동형 앱인 경우에는 단말기가 어느 위치에 있는 어떤 서버와 통신을 하는지 한눈에 볼 수 있는 시스템 구성도를 작성해야 한다. 시스템 구성도가 문서화되 어 있으면 향후, 향후 서비스에 문제가 발생하는 경우에 빠르게 대응할 수 있다.
(3) 서비스 흐름(service slow)
메인페이지로부터 각각의 서브 메뉴들이 어떤 화면들을 거쳐서 진행되는지 과정을 보 여주는 화면을 말한다. 예를 들어 어떤 특정 버튼을 누르면 어떤 이벤트가 발생하는 지, 다음 화면은 무엇인지, 어떤 화면에서 서버와 통신이 발생하여 공지사항 리스트를 가져오는지 등을 표시해 한 메뉴에 대한 전반적인 이용 과정의 흐름을 한 눈에 보여 주는 것이다. 와이어프레임 상에서 발견하지 못한 서비스 흐름상의 문제를 짚어볼 수 있다. 사용자가 앱을 이용하는 도중에 메뉴들의 구성이 엉키거나, 혹은 그 흐름이 끊 어지는 현상이 발생하지 않는지 확인하는 과정인 것이다.
(4) 메뉴별 화면 설계도 작성 및 상세 설명
메뉴에 대한 서비스 흐름도 작성이 완료되면, 각각의 화면에 대한 상세 설명 페이지를 작성한다. 상세 설명 페이지는 보통 이등분 해, 좌측에는 화면의 UI를 보여주고, 우측 에는 UI에 대한 설명을 기입한다. 설명은 디자이너에게 필요한 화면 설계에 대한 내용 을, 그리고 개발자나 알아야 할 개발 사항과 관련된 내용을 명시한다.
(5) 추가 관련 정보 작성
메뉴별 화면 설명은 구체적이고 이해하기 쉽게 설명하는 것이 바람직하며, 연결되는 서버가 있다면 해당 URL이나 관련 정보도 같이 작성한다. 그리고 프로그램 요소나 스 크립트 기능, ASP나 PHP 등의 프로그램 등을 표시하고, 그 기능에 대해 설명한다.
(6) 작업 스케줄 구성
앱 기획안의 초기 단계인 기획부터 개발 완료까지의 스케줄을 정리한다.
3. 스토리보드 작성 시 유의사항
(1) 일관된 기호의 표시
스토리보드 작성 시에는 많은 페이지를 다루기 때문에, 내용을 작성하는 방법이나 기 호, 번호 등에 일관된 방식을 사용하여 내용을 명확히 전달하여야 한다.
(2) 공통 영역의 정의
상단 메뉴나 하단 내용(푸터), 퀵 메뉴 등 화면내의 공통 영역에는 페이지마다 같은 표 식을 함으로써 중복해서 표현하지 않게 하는 것이 바람직하다.
(3) 영역별 세부 설계
스토리보드의 영역별 세부 설계 시, 각각의 영역을 명확히 구분한 다음 세부적인 설명 을 기술하여 해당 내용을 쉽게 이해할 수 있도록 한다.
(4) 버전업 관리
스토리보드는 작성 이후에 변경사항이 자주 발생하기 때문에, 갱신 시 버전과 날짜를 기록하여 효율적인 관리가 되도록 해야 한다.
스토리보드 작성 도구
1. 앱 스토리보드 제작 도구(storyboarding tool)
스토리보드 작성 방법은 와이어프레임과 같이 스케치를 이용하기도 하며, 제작 도구를 이 용하기도 한다. 웹과 모바일에 관련된 기획 업무에서 스토리보드를 작성하게 되는데, 파워 포인트나 이미지 편집툴을 사용하는 것에 비해 쉽고 빠르게 스토리보드를 작성할 수 있는 도구에는 파워 목업(http://www.powermockup.com), 발사믹(http://www.balsamiq.com) 등이 있다.
기획자는 화면 설계(Story Board, U.I., WireFrame)로 말한다.
웹 기획자들은 무엇으로 이야기하고, 무엇으로 소통하는가?
나는 단언컨데, 화면설계라고 생각한다. [화면설계는 다양한 이름을 가지고 있다. 스토리보드, Story Board, User Interface, U.I. 외국 에이전시들은 Wire-Frame이라고도 한다.]
IT 분야에서 밥을 먹는 우리들는 종종 그런 이야기를 한다. 웹 디자이너들은 Art를 한다고… 혹은 개발자들은 그들만의 언어로 소통한다고도 한다. 그러나 웹 기획자라면, 설령 말을 할 수 없을지라도 화면설계만으로도 디자이너/개발자와 의사 소통이 되어야 하고, 철저하게 화면설계의 논리적 연결로 검증받아야 하며, 최종적으로 검수할때도 S/B가 검수의 잣대가 되어야 한다.
이제 그 이야기들을 풀어보자.
1. 화면설계? Story Board? User Interface? U.I? 대체 이게 뭔가요?
웹 기획자의 역할(Role, R&R)은 별도의 포스트에서 다룰 예정이지만 여기서 간략히 짚어본다면
웹기획자란, 고객의 형이상학적 요구를 디자이너/퍼블리셔/개발자가 형상화할 수 있도록 형이하학적 언어(혹은 표현 수단)으로 그려내는 사람이다.
이 문장의 point는 세 가지이다.
* 형이상학적 요구 > 형체가 없는 관념의 세계에 있는 막연한 고객의 Needs (관련 포스트 [형이상학과 형이하학] 보기)
* 형상화 > 우리가 오감을 사용하여 보고, 만지고, 느낄 수 있는 형태로 만드는 작업 (디자인이든, 구동되는 프로그램이든)
* 형이하학적 언어 > 위의 포스트에서 설명
웹/IT 프로젝트에는 다양하고 복잡한 프로세스가 있지만, 화면설계 관련해서는 그 중 간략하게 다음과 같은 것들만 살펴보겠다.
위에서 정의한대로 고객의 다양하고, 다양하게 해석가능하며, 형.이.상.학.적인 요구사항과 최종 검수 사이에는 우리가 지난번에 다룬 I.A.(메뉴구조도, 바로가기)와 이번 포스트에서 다룰 화면설계,즉 스토리보드가 존재한다. 그리고 프로젝트에 합류한 많은 디자이너, 퍼블리셔, 개발자들은 오로지 이 화면설계에 의지해 작업을 진행하게 된다.
즉, 최종적으로 세상에 배포될 결과물의 (PC, Mobile, App… 무엇이든) 청사진이자, 설계도이자, 등대요 목적지인것이다.
텍스트로만 이해가 어렵다면 아래 이미지 두 개를 보자.
좌측은 실제 세상에 나온 최종 결과물(형상화의 결과물)이다. 그리고 우측은 저 결과물을 만들어낸 화면 설계이다. (대부분의 경우 U.I.는 PPT를 이용한다) 저 화면설계를 보고 디자이너는 디자인을, 퍼블리셔는 퍼블리싱을… 그리고 개발자는 기능 구현을 한 것이다.
여러 호칭들 중에 “Wire-Frame”는 정말 “화면 구성” 이란 뉘앙스가 좀 더 강하고, “User Interface” “U.I.”는 “사용자 접점”이란 뜻으로, 특히나 web 시대로 넘어오면 많이 사용된 용어이다. Story Board는 가장 역사가 깊은 단어로 90년대 Multi-Media CD Title 이란 것이 일반적으로 사용될 때 이전부터 사용되던 용어로 단어에서 느껴지듯 ‘Story의 흐름’이란 뉘앙스가 좀 더 강하다. 광고나 영화 현장에서 ‘콘티’라는 용어가 쓰이듯이 일종의 스토리 라인을 가지고 있는 경우가 많다.
그러나 지금 Web 에서는 모두 특정한 구분 없이 “최종적으로 사용자에게 어떤 화면과 어떤 인터랙션(Interaction)을 제공할 것인가”란 의미로 구분 없이 사용된다.
2. 화면 설계의 구성은 ?
위에서 이야기한 것처럼 대부분의 경우 화면설계는 PowerPoint를 이용한다. 외국에 있을 때는 그 외 몇몇 다른 파일 포맷도 보았으나 ppt로 하는 것이 가장 무난할 것이다.
실제 사용된 파일을 살펴 보자.
첫 페이지는 보통 프로젝트 명을 담고 있으며, 프로젝트 규모가 커서 수백장 이상의 S/B가 필요할 경우 관리자/사용자 단을 구분하기도 한다. 위 화면은 “관리자 ” 영역 화면 설계이다. 그리고 우측 하단에는 작성자와 개정 이력이 있는데, 나는 15년이 넘도록 화면 설계가 초안에서 끝나는 프로젝트를 본 적이 없다. 고치고 고치다 보면. version이 0.1 에서 시작해서 0.2, 0.3 ~~ 등 계속 올라가게 된다.
이렇게 아래와 같이 말이다. ( 실제 사용된 아주 소규모 프로젝트였다. ) 이렇게 개정이력이 길어질 경우 두번째 페이지에 별도로 정리하기도 한다.
I.A.는 별도의 엑셀 파일로 정리하는 것이 일반적이지만, 화면 설계서의 앞 부분에 이렇게 한 페이지 넣어주면 다른 작업자들이 좀 더 직관적으로 이해하게 될 것이다.
본격적인 내용이 시작되기 전에 본 화면설계에서 사용할 일종의 규칙(범례)들을 정한다. 특별히 바뀌는 법은 없지만, 상황에 맞게 적용해서 사용하면 된다.
아래 샘플은 실제 모 사이트 관리자의 “회원 상세 보기” 화면을 설계한 것이다. 주의할 점 한가지는 아래에서 보이듯이 가능하면 실제로 들어갈 데이터를 샘플로 넣어주는 것이 좋다. 그래야 디자이너나 퍼블리셔가 해당 영역에 얼마나 많은 텍스트가 들어가는지를 가늠할 수 있고, 그래야 적정한 디자인 및 퍼블리싱 된 파일이 나온다. 실제값을 불러 오는 것은 물론 개발에서 하지만 그렇다고 언제나 xxxxxxx 처럼만 데이터를 입력하면 다른 작업자들에게 혼돈을 주게 될 것이다.
위 샘플에서 마일리지 부분 (붉은색 숫자 2)를 눌렀을 때 나오는 화면이다.
뒷 부분을 어둡게 처리해서 레이어가 열렸음을 알려주고, 해당 내용을 작성하였다.
전체적으로 보면
* 상단은 문서 관리를 위해 “제목” “Location” “작성자” “마지막 업데이트 날짜”등을 입력하고, (보통 마스터 슬라이드 활용)
* 좌측은 본격적으로 U.I를 그리는 영역
* 우측은 Description을 기입 (샘플과 같이 붉은색 숫자를 표시해줘서, 다른 작업자들이 어느 부분인지 알게 해준다)
3. 그 외 화면 설계시 주의점
1) 스토리 보드 전체를 관통하는 컨셉의 정의.
프로젝트의 성격과도 일맥 상통하는 이야기로, 만약 “웹 접근성” 때문에 리뉴얼하는 프로젝트와 “온라인 마케팅 강화”를 위해 진행하는 프로젝트는 성격이 다를 수 밖에 없으며, 그렇다면 그런 내용과 포인트들이 화면 구성의 구석구석에 묻어 있어야 한다. 가령 “접근성” 인증 마크 획득을 위해 진행하는 리뉴얼 프로젝트라면 컨텐츠나 메뉴의 탭 순서 등을 고려해야 할 것이다.
2) 논리 ! 논리! 논리!!!
기획자들이여, 제발 논리력을 키우자.
회원 가입 부분의 화면 설계를 작성중이라고 가정하면, 기존 가입 여부 확인 > 약관 동의 > 본인 인증 방법 선택 … 등의 Process 라는 것이 있고, 각각의 화면마다 인터랙션과 경우의 수를 생각해야 한다. 가입 여부를 확인하니 a) 기존 회원, b) 신규 회원으로 구분되고 각각 다음의 화면은 달라질 것이다. 본인 인증 방법 역시, 선택하는 옵션에 따라 다음 화면들이 달라질 것이다. 얼추 생각해도 이 3 개의 step만 가지고도 10개의 화면은 나올 것이다.
미안한 얘기지만, 제일 한심한 기획자는 퍼블리셔나 개발자에게 “여기서 이 버튼 누르면 어느 화면으로 가야해요? ” 라는 소리를 들을 때다. 그만큼 Desc.를 성실하게 작성하지 않았거나, 아예 그 프로세스 자체를 깊게 고민하지 않은 것이다. !!!
3) 보기 좋은 음식이 먹기도 좋다.
제발 화면설계를 깨끗하게 작성하자. 서두에서 말했듯이 기획자는 화면설계로 “대화”하는 것이다. 말투나 어휘 선택이 불경한 사람이 주변 사람들과 관계가 좋은 경우는 드물다. 아래 샘플을 보자. 하나는 PPT 파일이고 하나는 디자인팀에서 디자인을 해서 보낸 jpg 파일이다. 어느 것이 ppt인지 맞춰보기 바란다. 제발 부탁이니, 깨끗하고 보기 좋게 화면설계를 치자.
4) 자신만의 Library를 만들자.
어느 정도 웹기획 일을 한 사람이라면 본인것, 남의것 등 화면설계 ppt 파일이 쌓이게 된다.
프로젝트별로 정리해 놓지 말고 [ 메인 인덱스 / 서브 인덱스 / 게시판형 / 블로그형 / html 컨텐츠 형 ] 등 종류별로 Library를 만들어두면 매우 편리할 것이다.
** 참고 자료로 외국에서 구한 샘플을 두 개 제공한다.
RafalTomal-WireframeKit.psd.zip
Wireframe-tools-Vol01-PIXEDEN.zip
마지막으로 해주고 싶은 말은…
고객은 귀신 같다. 우리가 화면 설계를 작업하며, “에이~ 이 부분은 대충해도 되겠지” 라고 생각하면 오픈 직전에 반드시 고객이 그 부분을 언급한다. “에이~ 개발자가 알아서 하겠지” 라고 생각하면… 반드시 개발자가 인상을 팍팍 쓰며, “여기서 어디로 넘어가요?” 라고 이야기 한다.
기획자는 화면설계로 평가 받아 마땅하다…
Philosophiren.
Web과 관련된 고민이 있다면, 지금 이 블로그의 운영자와 상의하세요.
* 웹 전략 컨설팅
– 현재 운영중인 Web 혹은 온라인 관련 문제점 분석, Business Process 재정립, 시사점 도출
– 경영 목표와 전략을 뒷받침하는 Online Business 전략, 중소/중견 기업을 위한 현실적인 BPR/ISP,
– CRM, 전자결재, 신규 사업을 위한 시스템 통합/구축 방안
* 웹/모바일/App 구축 및 리뉴얼, 온라인 마케팅
– Web, Mobile, App 신규 구축 및 리뉴얼
– Web/Mobile 운영(Site Maintenance) 지원 – Brand Strategy + Brand Architecture + Brand Maintenance를 통한 온라인 통합 브랜딩, 소셜 마케팅 전략
>> www.PhiloBiz.co.kr을 방문하여 Contact us 나 Project 문의 메일을 이용해 주세요.
[기획#3]스토리보드(화면설계서) 작성법-템플릿제공
기획자가 작성한 스토리보드는 프로젝트를 수행하는 동안 개발자와 디자이너의 소통의 도구가 됩니다.
아이디어 단계에서는 각자의 머리속의 서로 다른 그림으로 대화를 했다면, 본격적인 프로젝트에 돌입하면서 기획자의 스토리보드를 중심으로 하나의 그림을 그리게 되는 거죠.
그런만큼 기획자는 디자인과 개발에 대한 기본적인 이해를 가지고 있는 것이 중요합니다.
하지만 아무리 뛰어난 기획자가 작성했다 하더라도 “완벽한 스토리보드”는 없습니다.
그렇기 때문에 기획팀에서 1차로 작성된 스토리보드는 개발팀과 디자인팀의 검토와 토론을 통해 수정과 보완 을 거듭합니다.
이런 여러번의 수정과 토론을 거치면 드디어 개발팀, 디자인팀과 합의된 스토리보드가 완성 됩니다.
그럼에도 아직 이 스토리보드는 완벽하지 않습니다.
실제 디자인과 개발에 돌입하면 모두가 예상하지 못했던 문제들이 나오기 시작하며, 이 때부터 무한 토론과 수정 을 또 거쳐야 합니다. 이 때가 기획자의 커뮤니케이션능력을 발휘해야할 때입니다!
예민해진 프로젝트 팀원들이 서로의 능력을 비하할 수 있는 타이밍이거든요… ;;;
잊지마세요! 그 누구도 완벽하게 모든 문제를 예상할 수 없다는 것을요.
키워드에 대한 정보 ui 스토리 보드
다음은 Bing에서 ui 스토리 보드 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 UX/UI기획 기초 11강 UI 스토리보드 작성과 UI 상세설계 가이드 | T아카데미
- 동영상
- 공유
- 카메라폰
- 동영상폰
- 무료
- 올리기
UX/UI기획 #기초 #11강 #UI #스토리보드 #작성과 #UI #상세설계 #가이드 #| #T아카데미
YouTube에서 ui 스토리 보드 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 UX/UI기획 기초 11강 UI 스토리보드 작성과 UI 상세설계 가이드 | T아카데미 | ui 스토리 보드, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
