당신은 주제를 찾고 있습니까 “상세 페이지 스토리 보드 – #04 상세페이지 디자인! 쉽게 하고 싶다면 기획서(스토리보드)를 분석하자!“? 다음 카테고리의 웹사이트 sk.taphoamini.com 에서 귀하의 모든 질문에 답변해 드립니다: sk.taphoamini.com/wiki. 바로 아래에서 답을 찾을 수 있습니다. 작성자 김연디 이(가) 작성한 기사에는 조회수 13,400회 및 좋아요 381개 개의 좋아요가 있습니다.
Table of Contents
상세 페이지 스토리 보드 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 #04 상세페이지 디자인! 쉽게 하고 싶다면 기획서(스토리보드)를 분석하자! – 상세 페이지 스토리 보드 주제에 대한 세부정보를 참조하세요
안녕하세요
디자이너 연디입니다!
수월하게~! 쉽고~! 빠르게~!
제품 상세페이지 디자인을 하고 싶다면
꼬~옥
기획서를 살펴보고 시작하세요…!
경험해보니 좋아요b
#실무디자인 #상세페이지 #디자이너
상세 페이지 스토리 보드 주제에 대한 자세한 내용은 여기를 참조하세요.
스마트스토어 잘 팔리는 상세페이지 스토리보드 제작방법
저는 디자인 기획 혹은 레이아웃까지 스토리보드로 만들기도 하는데요, 잘 팔리는 상세페이지 디자인을 하는 디자이너가 어떻게 스토리보드를 만드는지 …
Source: m.blog.naver.com
Date Published: 8/18/2022
View: 3723
스마트스토어 상세페이지 스토리보드를 짜기 전에 알아야할 것
제품을 팔기 위해서는 상세페이지를 만들어야한다. 어떻게 만드느냐에 따라 구매전환률 자체가 달라지기 때문에 매우 민감한 사항이다.
Source: woopalife.tistory.com
Date Published: 9/19/2022
View: 7019
상세페이지 디자인! 쉽게 하고 싶다면 기획서(스토리보드)를 …
안녕하세요 디자이너 연디입니다! 수월하게~! 쉽고~! 빠르게~! 제품 상세페이지 디자인을 하고 싶다면 꼬~옥 기획서를 살펴보고 시작하세요.
Source: designup3.tistory.com
Date Published: 2/7/2021
View: 7886
송플이 알려주는 상세페이지 기획의 중요성 > 셀러정보공유
상세페이지에 많은 내용과 디자인을 넣으려면 … 브랜드스토리 (베딩트리) … 1:1컨설팅 후 상세페이지 스토리보드를 송플이 작성해서.
Source: www.sellerly.net
Date Published: 9/20/2021
View: 6034
이커머스 ‘상세페이지’ 순서만 알아도 반은 성공 – 패션포스트
에디터로 일하며 쇼핑몰과 스마트스토어의 상세페이지 수백 개를 보고, 와디즈 ‘대박 펀딩’ 스토리 수천 개를 분석하면서 생각한 궁극의 템플릿은 …
Source: fpost.co.kr
Date Published: 4/7/2021
View: 6321
광고 배너 스토리보드(SB) 작성하기 – 브런치
디자인팀과 친해지기! Stroy Board를 작성하자! | 디지털 광고 쪽에서는 흔히 배너와 웹 페이지 기획이 기본이다. 광고 기획자들은 디자인팀에게 제작 …
Source: brunch.co.kr
Date Published: 12/7/2021
View: 1782
초보자를 위한 스토리보드 작성 팁 – 요즘IT
기획자가 그리는 UI Flowchart는 각 화면의 전환과 흐름을 확인합니다. Wireframe과 상세 설명을 포함하는 개별 기획 장표는 서비스의 전체 흐름을 확인 …
Source: yozm.wishket.com
Date Published: 11/26/2021
View: 2893
04 상세페이지 디자인! 쉽게 하고 싶다면 기획서(스토리보드)를 …
#04 상세페이지 디자인! 쉽게 하고 싶다면 기획서(스토리보드)를 분석하자! | 상세 페이지 스토리 보드 3195 투표 이 답변. by Hwang Minho; 14/08 …
Source: ko.taphoamini.com
Date Published: 2/8/2021
View: 9665
주제와 관련된 이미지 상세 페이지 스토리 보드
주제와 관련된 더 많은 사진을 참조하십시오 #04 상세페이지 디자인! 쉽게 하고 싶다면 기획서(스토리보드)를 분석하자!. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 상세 페이지 스토리 보드
- Author: 김연디
- Views: 조회수 13,400회
- Likes: 좋아요 381개
- Date Published: 2018. 10. 6.
- Video Url link: https://www.youtube.com/watch?v=qq-MUOkZomM
스마트스토어 잘 팔리는 상세페이지 스토리보드 제작방법
저는 요즘 잘 팔리는 상세페이지를 만들기 위한 과정들을 포스팅하고 있는데요, 저번 포스팅에서 상세페이지를 만들기 위한 준비를 하셨다면 오늘은 그 자료들을 토대로 스토리보드를 만드는 방법을 알려드리려고 해요.
제가 상세페이지 의뢰를 받았을 때 고객님께 필요한 준비사항들을 요청하고, 첫 번째로 하는 일이 스토리보드를 만드는 일이에요.
저는 디자인 기획 혹은 레이아웃까지 스토리보드로 만들기도 하는데요, 잘 팔리는 상세페이지 디자인을 하는 디자이너가 어떻게 스토리보드를 만드는지 알려드릴게요.
스마트스토어 상세페이지 스토리보드를 짜기 전에 알아야할 것
반응형
제품을 팔기 위해서는 상세페이지를 만들어야한다. 어떻게 만드느냐에 따라 구매전환률 자체가 달라지기 때문에 매우 민감한 사항이다. 감히 상세페이지가 전부라고 말하는 사람들도 있다.
상세페이지를 구상하기 전에 생각해야할 것들
1. 스마트스토어에서 상세페이지를 만든다는 것
이 글의 제목은 스마트스토어 상세페이지를 짜는 법이다. 그렇다면 상세페이지도 중요하지만, 스마트스토어라는 것을 좀 더 신경쓸 필요가 있다. 인스타마켓이나, 블로그마켓처럼 여러 플랫폼이 존재하기 때문에 그에 맞는 전략을 구사해야한다.
스마트스토어 상세페이지는 흔히 보는 쇼핑몰 상세페이지처럼 제작하는 것이 일반적이다. 간단하게 말해서 도매사이트에 보이는 그 정도의 상세페이지를 제작한다면 절반이상을 먹고 들어갈 것이다.
그러나, 스마트스토어 가이드에서도 설명되어 있듯이 네이버는 상세페이지를 블로그처럼 구상하는 것을 좀 더 선호한다. 그리고, 이 방법을 썼을때 구매전환률도 나쁘지 않다.
2. 블로그처럼 상세페이지를 구상하기
그렇다면, 블로그처럼 상세페이지를 만드는 것은 어떻게 해야할까? 그 방법을 블로그를 해보는 것이 제일 중요하지만, 중요한건 글쓰는 능력과 카피라이팅 능력, 그리고 제품 상세페이지에 들어가는 이탈률을 줄이는 스킬이 필요하다.
이런 내용을 알아보기 전에 블로그처럼 상세페이지를 꾸민다는 것은 별거 없다. 사진 글 사진 글 사진 글 형식으로 이어나가면 된다. 대신 사진에 다양한 정보를 주기 위해 글자를 넣어도 되고, 사진으로만 밀고 나가면 된다.
3. 상세페이지 흐름도
카피는 정말 중요하다. 현재 콘텐츠 마케터들이 각광받기 있는 이유도 이 때문이다. 사람들은 재미없으면 나간다. 특히 제품이라면 한눈에 띄고, 글을 읽었을때 후킹이 되야 한다.
제품 상세페이지는 보통 초반에 문제점을 지적하는 것으로 시작한다. 상품이란 욕구를 충족하거나, 문제점을 해결하는 것이 주된 목적이기 때문에 타겟층이 가지고 있는 문제점들을 적절한 카피라이팅을 통해 유혹하는 것부터 시작한다.
아래 상세페이지 흐름도에서 이어서 말하겠다.
상세페이지 흐름도
제품 메인 사진
(리뷰시 리뷰사진을 통한 구매전환율 상승전략)
타겟층들의 문제점 복기
해당제품을 통한 해결방안 제시
이유1
이유2
이유3
이탈율을 낮추기 위한 혜택제시
마지막 핵심 한마디 및 사용예시
상세페이지를 작성하는 것은 제품마다 다르다. 그러나, 일정이상의 구매전환률을 보장하기 위해서는 나름 연구하고 구상해야 하는데 상세페이지 흐름도대로만 작성하면
단순히 위탁판매사이트에서 복붙하는 것보다 훨씬 좋고, 블로그형식으로 작성할 경우는 더더욱 네이버 스마트스토어에서 남들보다 SEO를 잘 맞출 수 있기 때문에 조금이나도 높은 위치에서 판매를 시작할수 있다.
4. 데이터를 보고 분석 및 수정을 반복하기
구매전환률을 높이기 위해서는 데이터를 보고 지속적인 보완과 수정을 해야한다. 이때 데이터는 광고를 쓰건, 본인 sns를 이용하건 많이 끌어모아야 한다. 적어도 1000조회수 이상
이때의 구매전환률을 보고 수정을 해야한다. 가령 구매전환률이 1%로 너무 낮다면 남들 상세페이지나 자료조사를 통해 상세페이지를 조금 변형해보는 것이다.
그랬는데, 오히려 구매전환률이 낮아진다면 이 방법은 아닌 것이고, 반대로 올라간다면 성공인 것이다. 여기서 구매전환률이 낮아질까봐 고민하는 사람들이 있을텐데 내 제품 내가 잘 알고, 연구하게 되는데 고쳤다고 낮아질 가능성은 많이 낮다.
그렇기 때문에 시도하고 시도하자.
도매꾹 위탁판매로 월 1000만원 판매한 방법
쇼핑몰창업방법 내가 시작한 방법 알려드림(스마트스토어)
반응형
상세페이지 디자인! 쉽게 하고 싶다면 기획서(스토리보드)를 분석하자!
검색 관리
글쓰기
로그인
로그아웃 메뉴
인터넷에서 찾아 본 좋은 정보들은 한번만 보고 지나치기에는 좀 아깝습니다. 그래서 이곳에 보관해두고 함께 공유하고자 이 블로그를 개설하였습니다.
셀러리 커뮤니티 – 쇼핑몰창업의 모든 것
※스압주의
안녕하세요 🙂
여러분의 매출요정 쏭입니다 😀
오늘은 많은 대표님이 궁금해하시는 ‘매출이 나는 사이트 만드는 노하우’
그중에서도 상세페이지 기획의 중요성에 대해
예시를 들어 이야기를 해볼까 합니다 🙂
예시를 들어드릴 쇼핑몰은
‘하우스앤’ 이라는 고급 침구 판매 업체입니다.
하우스앤은 지난 3월 ‘쇼핑몰진단 게시판’에 진단 문의를 남겨주신 업체예요!
여러분도 아시다시피 쇼핑몰 진단 게시판은 송플이 관리하죠!
아무튼 각설하고!
하우스앤 상세페이지의 문제점를 먼저 체크해보도록 하죠!
히얼위고!
◈하우스앤 기존 상세페이지◈
대표님 진정하세요
◈기존 상세페이지 문제점◈
1. 상세페이지에 ‘대표컬러’가 없다.
상세페이지에 많은 내용과 디자인을 넣으려면
대표컬러 초이스는 선택이 아닌 필수 입니다.
내 사이트를 컬러로 보여준다면 이 컬러지!
하는 컬러 한가지를 꼭 정해놓으세요.
(컬러마다 표현하는 느낌, 상징이 다릅니다)
가구/침구류는 쨍한 컬러보다는,
안정감을 느낄수 있는 회색톤, 브라운톤, 톤다운된 그린정도가 알맞습니다.
메인컬러가 정해졌다면,
상세페이지, 브랜드 스토리등을 만드실때 그 컬러를 주로 사용해서 제작해주세요.
그러면 중구난방하지 않고 훨씬 통일감 있어 보일거예요.
2. 상세페이지에 나온 내용에 중첩된 부분이 너무 많다.
현재 상세페이지에 나온 ‘주제’만 쭉~ 메모장에 적어보면
1. 멤버십혜택 (회원가입/3%적립금/30만원이상 사은품/리뷰/청첩장이벤트)
2. 브랜드스토리 (베딩트리)
2-2. 베딩트리를 선택해야 하는 6가지 이유
3. 킹매트리스 사이즈별 침구옵션(미국)
4. 상품이미지
5. 상품색 상세
6. 서브원단 설명(사진)
7. 상품 상세 설명(글)
8. 울트라모달코튼 설명
9. 상품 상세 설명 (체크형식)
10 . 세탁방법 + 배송포장 형태
11. 세탁방법
12. 평생 수선서비스
13. 포토리뷰
14. 네이버페이 상품리뷰
15. 침구류 구입 팁
16. 이불 연결 끈 위치도
17. 커스터마이징으로 제작 가능 (이불끈)
18. 침구류 구성품 가이드
19. 침구 사이즈 가이드
20. 미국 킹 매트리스 사이즈 구분표
21. 모니터 해상도
깜놀 원모얼타임
…자랑하고 싶은 내용이 많은건 알겠는데
많아도 너무많죠?
게다가 중복된 내용도 너무많습니다.
상세페이지의 내용은
‘고객이 궁금해하는 것’에 맞추어서 재배열 해주시고
그 안에 들어있는 설명은
간략하고 보기 쉽게 써주어야 해요.
– 내가 받는 혜택은 뭐야?
– 내가 사려는 상품좀 보여줘
– 그래서 어떻게 주문하면 돼?
– 주의사항은?
▲이런 흐름
과감하게 중복된 내용은 지워주고
사업자분이라면 한번 손으로 글을 써보는 시간을 가지는것이 굉장이 좋습니다.
아무튼 이런 문제들을!!
송플이 어떻게 해결 해드렸느냐!
(좌 : 비포 / 우 : 에프터)
1. 필요없는 내용은 과감히 빼고, ★최대한 고객이 이해하기쉽게★ 배치하라!
2. 대표컬러(1~3개의 컬러)로 디자인하라!
3. 쓸데없는 미사여구는 줄일것
4. 쓸데없는 영어도 쓰지말 것
5. 위의 작업이 힘들면 전문가를 쓸것.
디자인에 전문성이 떨어지는것만큼 소비자의 신뢰를 떨어뜨리는것도 없다.
아무튼, 이렇게 진단을 드렸더니
하우스앤 대표님으로부터 상세페이지를 맡기고 싶다고 연락이 오셨어요
그래서 송플이 기획하고 진행하고 있는
제작대행 서비스를 견적을 안내드렸지요
이놈의 인기
상세페이지 제작대행은
1:1컨설팅 후 상세페이지 스토리보드를 송플이 작성해서
(자세한 내용은 영업비밀★)
운영자님께 1차컨펌을 받고, 디자인에 들어가는 방식이예요~
기획안 안에는 차별화된 송플만의 브랜딩 전략이 들어있지요!
벌써 송플에게 제작대행 맡기고 월매출 수직상승 하신 분들 줄선건 안비밀!
(송플 뿌듯)
1:1컨설팅 -> 사이트의 특장점 파악 -> 디자인기획 -> 1차컨펌 -> 디자인기획수정 -> 2차컨펌 -> 디자인
상세페이지 기획은 이렇게 하는거예요
다른분들도 참고하셔서
내 쇼핑몰이 정말 판매에 최적화 된 상세페이지인지?
더 구매율을 올릴만한 구석은 없는지?
항상 고객의 입장에서 생각하는 습관을 기르시길 바랍니다 😀
이 외에도 쇼핑몰 제작 전에 궁금한게 있다면
언제든지 진단방, 자유게시판 방에 물어보세요!
송플은 항상 열려있답니다 🙂
그럼 다음에 봐요!
광고 배너 스토리보드(SB) 작성하기
디지털 광고 쪽에서는 흔히 배너와 웹 페이지 기획이 기본이다. 광고 기획자들은 디자인팀에게 제작 요청을 하게 되며 이때 전달하게 되는 문서를 통상 스토리보드(Storyboard), 줄여서 SB(에스비) 부른다. 주로 PPT로 작성하며 영상 제작 기획안도 스토리보드로 범용적으로 쓰이는 점 참고 바란다.
명확하고 좋은 SB는 디자이너의 작업 속도를 빠르게 만들고 기획자가 원하는 디자인을 얻을 수 있기에 중요하다. 신입들이 입사하게 되면 농담으로 “일단 SB 300개 그려보고 시작하자!” 할 정도로 기본기라고 할 수 있다.
18년 12월 26일 Live 된 타임보드 배너를 예시로 3가지 순서로 들어보겠다.
(직접 진행, 제작한 디자인이 아니며, SB 가정하에 예시로 작성하였으니 참고만 바란다.)
1. 기본 가이드 작성하기
기본적으로 필자가 쓰는 항목으로 참고하길 바란다.
1) 제목
2) 내용
3) 비고 OR 상세 내용 (추가로 하고 싶은 말 작성)
4) 버전 : 추후 버전 0.2 > 0.3 > 0.4 순차적으로 수정사항을 업데이트하여 보기 편하기 위함
5) 작성일
6) 작성자 : 팀-이름-직급
7) 지면, SIZE, 수량, 확장자명 : 더불어 용량(kb)도 추가 가능
2. 비율 맞추고 확대하기
비율 가로 7.4cm x 세로 1.2cm로 맞춘다
타임보드가 가로 740px X 세로 120px 이기 때문에 PPT상에서는 7.4cm X 1.2cm로 비율을 맞추고, 비율을 늘려 확대한다. 디자이너가 보기 좋게 폰트를 가독성 있게 작성하자. 그리고 테두리는 깔끔하게 두께 0.5pt에 회색으로 사용하면 보기가 좋다.
Shift를 누른채로 비율대로 확대한다
3. 세부내용 작성 하기
카피 색상, 카피 배치, 로고 위치, 사용 이미지, 추가적인 디자인 요청사항 등을 자세히 적는다. 디자이너가 참고할 수 있는 시안 래퍼런스(reference) 및 폰트 등을 캡쳐하여 첨부하면 더욱 좋다.
폰트 및 색상을 처음부터 PPT에 적용해서 전달도 하지만, 이미 브랜드 배너를 오랫동안 제작한 디자인팀에서는 이미 브랜드의 기본 폰트와 선호하는 폰트를 알고 있기에 이러한 부분은 서로 커뮤니케이션이 충분히 되어야 한다. 모델이나 배경도 누끼를 따거나, 잘라서 작성하기도 한다.
하지만 광고기획자는 디자이너보다 미적 감각이 부족할 수 있기 때문에 이는 디자이너에게 브랜드 톤&매너를 유지하되 어느 정도 자유도를 주는 것도 퀄리티를 높일 수 있는 방법이다.
4. 메일 요청하기
제작 요청을 할 때는 기본적으로 SB파일, 디자인 가이드 파일을 첨부하며, 언제까지 제작되어야 하는지 일정을 자세히 적어야 한다. 주의사항으로 디자이너가 파일을 전달한 시점과 광고주가 컨펌하는 시간 그리고 2차 수정되는 시간까지 고려해야 한다!
[중요도 별 다섯 개!]– 광고주가 컨펌하는 시간
– 2차 디자인 수정 시간
– 매체 세팅하는 시간
이렇게 요청이 끝나고 제작 완료가 되면 아래와 같이 결과물로 나오게 된다!
출처 : 타임보드 캡쳐본
추가 팁으로 디자인 팀장 혹은 담당에게 어느 정도 제작수량이나 일정을 미리 선 구두상이라도 공지하는 것이 좋으며, 제작 요청 후에는 메신저나 구두로 이야기하자. 끊임없이 커뮤니케이션해야 일정을 맞추고, 문제점이 무엇인지, 퀄리티를 높일 수 있는 방법은 무엇인지 등등 논의하다 보면 더욱 좋은 배너 디자인이 나올 수 있다.
좋은 SB! 좋은 디자인!
초보자를 위한 스토리보드 작성 팁
<출처 : 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의 약자입니다.
상세 페이지 스토리 보드 3195 투표 이 답변 – Ko.taphoamini.com
We are using cookies to give you the best experience on our website.
You can find out more about which cookies we are using or switch them off in settings.
키워드에 대한 정보 상세 페이지 스토리 보드
다음은 Bing에서 상세 페이지 스토리 보드 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 #04 상세페이지 디자인! 쉽게 하고 싶다면 기획서(스토리보드)를 분석하자!
- 동영상
- 공유
- 카메라폰
- 동영상폰
- 무료
- 올리기
#04 #상세페이지 #디자인! #쉽게 #하고 #싶다면 #기획서(스토리보드)를 #분석하자!
YouTube에서 상세 페이지 스토리 보드 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 #04 상세페이지 디자인! 쉽게 하고 싶다면 기획서(스토리보드)를 분석하자! | 상세 페이지 스토리 보드, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
