당신은 주제를 찾고 있습니까 “앱 메뉴 구조 도 – 서비스 메뉴 구조도 작성하기 2부-피그마로 내 앱 서비스 기획하기“? 다음 카테고리의 웹사이트 you.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://you.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 노코드TV (NoCode TV) 이(가) 작성한 기사에는 조회수 295회 및 좋아요 10개 개의 좋아요가 있습니다.
앱 메뉴 구조 도 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 서비스 메뉴 구조도 작성하기 2부-피그마로 내 앱 서비스 기획하기 – 앱 메뉴 구조 도 주제에 대한 세부정보를 참조하세요
피그마로 내 앱 서비스 기획하기 강의입니다.
앱 메뉴 구조 도 주제에 대한 자세한 내용은 여기를 참조하세요.
메뉴구조도_양식(샘플) – 브런치
정의 및 사용시기, 작성방법 공유 | 안녕하세요~ 😀 오늘은 기획자가 많이 작성하는 문서 중 ‘메뉴구조도’에 대해서 알아보려고 합니다. 메뉴구조도는 …
Source: brunch.co.kr
Date Published: 5/16/2022
View: 6324
IA, 메뉴구조도, 화면목록이 헷갈린다면? | 요즘IT
웹∙앱 구축 시 필요한 화면과 메뉴의 정보 구조를 설계 및 정의하는 문서입니다. 보통 정보의 구조화를 통해 사용자가 화면을 마주하기까지 필요한 화면 …
Source: yozm.wishket.com
Date Published: 12/4/2021
View: 5466
웹, 모바일을 위한 I.A(Information Architecture, 정보구조도)
I.A.의 기초 이론과 역할 그리고 구조도 작성법에 대해 알아보도록 하겠습니 … 자세한 내용을 포함하고 있는 것이 바로 앱 상세 메뉴 구조도입니다.
Source: plavement.tistory.com
Date Published: 7/21/2021
View: 5557
서비스 구조도 분석 양식
사이트 기준으로 서비스를 개선하거나 리뉴얼할 때 메뉴 구조를 분석해야 한다. 서비스하고자 하는 구조를 명확하게 잡아야 목적에 맞는 온라인 …
Source: kun-hee.tistory.com
Date Published: 10/1/2021
View: 9855
UI디자인
메뉴 구조도 기능 : 메뉴 구조도는 앱 개발자와 디자이너를 위해서 각 업무에 대한 요약이나, 기본적인 사항들을 기록하는 기능을 한다. 페이지와 다른 정보 요소 간의 …
Source: webgirlhk.tistory.com
Date Published: 8/16/2022
View: 1134
기획서(스토리보드) 작성 방법 | 05 – 메뉴트리 (Menu Tree)
사용자의 동선이 끊기지 않는 메뉴구조 설계 등의 부가적인 목적이 있습니다. … 상기 관리자 웹 메뉴트리의 경우 횡(가로) 형으로 작성되었으며, 사용자 앱 의 경우 …
Source: smkdir.tistory.com
Date Published: 6/1/2021
View: 3631
메뉴구조도_양식(샘플) – 기획업무 및 이직 노하우
안녕하세요~ :D. . 오늘은 기획자가 많이 작성하는 문서 중 ‘메뉴구조도’에 대해서 알아보려고 합니다. . 메뉴구조도는 무엇이며, 언제 사용하고, …
Source: dreamiter.tistory.com
Date Published: 9/11/2021
View: 5767
앱 기획의 새로운 방식, Figma! – 인프런 | 학습 페이지
서비스 메뉴 구조도 작성하기 2부. 강의명 : 앱 기획의 새로운 방식, Figma! 수강 기한 : 무제한. 진도율 : 0강/22강 (0%) | 시간 : 0분/152분.
Source: www.inflearn.com
Date Published: 1/23/2022
View: 589
[IA] 정보구조는 어떻게 그려야할까? 정보구조의 8가지 원칙
… 앱의 화면과 메뉴구성을 기획하기위해 정보구조를 생각하지 않을 수가 … 하위 메뉴에 숨겨져도 되는 정보들에 대한 정의 단계가 없어서 와이어 …
Source: teul-by-jy.tistory.com
Date Published: 10/7/2022
View: 2069
주제와 관련된 이미지 앱 메뉴 구조 도
주제와 관련된 더 많은 사진을 참조하십시오 서비스 메뉴 구조도 작성하기 2부-피그마로 내 앱 서비스 기획하기. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 앱 메뉴 구조 도
- Author: 노코드TV (NoCode TV)
- Views: 조회수 295회
- Likes: 좋아요 10개
- Date Published: 2021. 6. 17.
- Video Url link: https://www.youtube.com/watch?v=bN0xgPADj1c
안녕하세요~ 😀
오늘은 기획자가 많이 작성하는 문서 중 ‘메뉴구조도’ 에 대해서 알아보려고 합니다.
메뉴구조도는 무엇이며 , 언제 사용하고, 어떻게 작성하는지 에 대해서 제가 작성했던 양식을 바탕으로 간단하게 설명드리겠습니다.
메뉴구조도란?
메뉴구조도는 사이트에 구성되어야 하는(혹은 구성되어 있는) 페이지를 트리형태로 표현한 문서로 보통 메뉴 간의 상/하관계와 기능 등을 엑셀로 작업하는 문서입니다.
조금 더 쉽게 설명을 해드리면 홈페이지에 있는 메뉴들을 연관 있는 것끼리 모아서 정리를 한 문서라고 생각하면 됩니다.
제가 좋아하는 회사 중 한 군데인 ‘네이버(NAVER)’ 홈페이지를 예를 들어 설명을 드리겠습니다.
위 링크에 접속을 하면 상단에 ‘네이버 | 서비스 | 가치실현 | 홍보 | 투자정보 | 채용’ 이라는 메뉴가 보입니다.
이러한 메뉴들은 1Depth 로 표현을 하며, 네이버그룹 홈페이지에서 많은 메뉴들을 6개의 대표그룹으로 구성해놓았다고 생각하면 됩니다.
(물론, 1Depth의 메뉴이지만 메인 등에서 노출을 시키지 않는 경우도 존재합니다)
이번에는 1Depth 처음에 위치한 ‘네이버’라는 메뉴를 클릭하면 하단에 ‘네이버’ 메뉴와 연관이 있는 서브메뉴들이 노출됩니다.
여기서 ‘NAVER | 주요관계사 | 제휴제안 | CONTACT’ 가 2Depth 가 됩니다.
그 다음으로는 ‘제휴제안’ 하단에 위치한 ‘제휴제안 안내 | 제휴제안 등록 | 검토현황 조회’ 메뉴가 3Depth 메뉴가 됩니다.
메뉴구조는 깊이가 깊을수록 사용자 편의성에 좋지 않기 때문에 3Depth로 구성하는 경우가 많지만 4Depth가 존재하거나 TAB 등이 존재할 수 있습니다.
이렇게 사이트의 전체적인 메뉴 정보들을 한눈에 알아볼 수 있도록 그룹화한 것을 메뉴구조도라고 말합니다.
메뉴구조도는 언제 사용하나요?
메뉴구조도를 작성하는 이유는 다양합니다.
저의 경우에는 벤처기업과 중소기업(SI업체)에 다닐 때 주로 메뉴구조도를 작성하였으며 이유는 다음과 같았습니다.
1) 제안서 작성을 위한 사전조사
2) 시스템(홈페이지) 신규 구축
3) 시스템(홈페이지) 고도화/리뉴얼
SI업체의 경우 새로운 사업에 참여하기 위해 제안서를 작성 하는데 이때 가장 기본이 되는 사항은 기존 시스템을 분석하고 이해하여야 합니다.
‘현재 ㅇㅇ홈페이지의 구조는 어떻게 되어있는지? 어떤 기능들이 있는지? 어떤 불편함이 있는지?’ 등을 분석해야 하는데, 이때 가장 먼저 진행을 해야 하는 부분이 메뉴구조도 작성입니다.
또한, 시스템을 신규 구축 하는 경우에도 메뉴구조도를 작성해야 합니다.
현업의 요구사항을 모두 수집 및 분석한 다음에 요구사항 어떤 메뉴에 어떤 식으로 적용시키고 이러한 메뉴들을 어떻게 구성을 하면 좋을지 등을 메뉴구조도에 1차적으로 표현합니다.
메뉴구조가 잘못 세워지는 경우에는 화면설계 등을 할 때 지장이 갈 수 있으므로 꼼꼼하게 메뉴 간의 관계와 사용자 편의성 등을 고려하여 설계를 하는 것이 좋습니다.
메뉴구조도는 어떻게 작성하나요?
메뉴구조도는 딱 정해진 양식이 없습니다.
저 또한 메뉴구조도를 작성하는 목적, 플랫폼 유형, 팀구성원 등에 따라 다르게 작성을 하는 편입니다.
1) 목적
– 신규로 구축해야 하는 시스템인 경우 : 요구사항을 바탕으로 1차적으로 메뉴 구성을 한 뒤, 이러한 메뉴를 다시 그룹화하는 방식으로 진행
– 제안서 작성을 위해 분석하는 경우 : 현재 시스템의 메뉴구조 및 기능을 그대로 작성
– (2개 이상의) 홈페이지를 통합하는 경우 : 각각의 홈페이지의 메뉴구조 및 기능을 1차적으로 작성 한 뒤, 통합 가능한 메뉴와 불가능한 메뉴를 분류
2) 플랫폼 유형
– WEB : 앞에서 설명한 방식대로 메뉴구조도 작성
– APP : 메뉴의 상/하관계를 고려하여 메뉴구조도를 작성하지만 메뉴간의 이동을 할 수 있는 부분을 함께 기재
3) 팀구성원
– 메뉴구조도를 작성할 때 함께 프로젝트를 진행할 팀원들의 이해를 돕기 위하여 각 메뉴의 기능(CRUD)까지 같이 기재하는 경우도 존재
– 참고사항
① CRUD는 데이터베이스 기준으로 개발자분들이 작업을 하는 부분이지만 기획단에서 이러한 부분을 정리해 주는 경우도 있음
② 팀원에 따라 이러한 CRUD를 작성해 주는 것을 좋아하는 사람도 존재하는 반면 월권이라고 생각하는 사람도 존재함
③ C – 생성, R – 조회, U – 업데이트, D – 삭제
메뉴구조도 작성 공부하는 Tip
1) 대기업 그룹 홈페이지에 접속합니다. (네이버그룹, 삼성그룹, 카카오그룹, CJ그룹, 현대그룹 등)
2) 메뉴들을 다 클릭하면서 메뉴구조도를 1차적으로 작성합니다.
3) 작성한 메뉴구조도와 홈페이지의 ‘사이트맵’을 비교하면서 자신이 누락한 부분이 있는지 등을 확인합니다.
4) 새로운 파일을 다시 열어 홈페이지의 메뉴들을 다시 작성해봅니다.
5) 이번에는 추가적으로 각 메뉴의 기능들을 ‘설명’ 란에 상세하게 작성을 합니다.
6) 그 이후 해당 메뉴에서는 새로운 값을 등록할 수 있는지? 삭제할 수 있는? 조회만 하는지? 등을 기재합니다.
메뉴구조도 양식은 약 3년 전 정도에 부사수에게 설명을 해주기 위해 작성한 자료로 참고용으로만 봐주세요.
첨부파일은 네이버 블로그를 통해 업로드 하고 있으므로 아래 링크에 접속해서 확인하시면 됩니다 😀
※ 기획업무와 기획자 관련되어 컨설팅이 필요하신 분들은 아래 링크를 참고해주세요.
https://brunch.co.kr/@dreamit/33
※ 기획업무를 하면서 궁금하신 사항은 아래 카카오 오픈채팅방에 들어오셔서 물어보시면 됩니다.
https://open.kakao.com/o/g4uIw5Kc
※ 각종 기획문서(화면설계서, 메뉴구조도 등)와 취업/이직문서(경력기술서, 포트폴리오 등)는 네이버 블로그나 티스토리를 통해 다운로드 받으실 수 있습니다^_^
https://dreamiter.tistory.com/
IA, 메뉴구조도, 화면목록이 헷갈린다면?
회사에서 사용자를 위한 서비스가 정의되면, ‘서비스에 어떤 화면들이 필요한지’, ‘각 화면들의 정보(화면 간 관계, 속성, 기능 등)는 어떻게 되는지’ 등을 정리합니다. 이렇게 정리된 화면들의 정보를 토대로 ‘화면 설계’를 진행하고, 이 과정에서 보통 IA(Information Architecture, 정보구조도)를 작성하게 됩니다. 그런데 기획자가 참고를 위해 IA 작성법을 찾다 보면 ‘메뉴구조도’, ‘화면목록’이라는 비슷한 이름과 성격의 문서가 등장합니다. 그러다 보니 ‘이 문서로 작성하면 되나’라는 생각으로 무심코 업무와 상관없는 걸 받아 작성하는 경우가 종종 발생합니다.
IA, 메뉴구조도, 화면목록은 구성이 모두 비슷하지만, 사실 각각 다른 목적을 갖고 있습니다. 이번 글에서는 화면 설계를 진행하기 전에 IA와 메뉴구조도, 그리고 화면목록 등 이 3가지 문서에 관한 목적을 파악하고, 경우마다 어떤 문서를 사용하면 좋을지 알아보겠습니다.
IA(Information Architecture, 정보구조도)란?
웹∙앱 구축 시 필요한 화면과 메뉴의 정보 구조를 설계 및 정의하는 문서입니다. 보통 정보의 구조화를 통해 사용자가 화면을 마주하기까지 필요한 화면들의 흐름을 시각화하여 나타냅니다. 따라서 각 화면들의 연관성과 접근성을 업무별 필요한 기준으로 분류하여 웹∙앱의 큰 틀을 파악할 수 있습니다.
어떻게 작성할까?
보험가입 프로세스 IA <출처: 본인>
Depth
화면의 깊이를 뜻하며, 정보구조도의 핵심 요소입니다. 메인을 기준으로 0 Depth로 시작하여 서비스 화면의 흐름에 따라 1Depth, 2 Depth, 3 Depth 순으로 정의합니다. Depth가 깊은 건 ‘최종 목표까지 거쳐야 할 단계가 많다’라고 할 수 있습니다. 그래서 서비스 구축 시 Depth가 깊지 않도록 하는 것을 권장하고 있습니다. 다만 반드시 있어야 할 화면들이라면 많이 작성할 필요가 있습니다.
형태
화면의 형태를 구분합니다. 보통 일반 페이지, 팝업, 탭, 링크 등으로 구분하며 이는 서비스 내 어떤 형태의 화면들이 존재하는지 수월하게 파악할 수 있도록 합니다.
개발 구분
신규 서비스를 구축할 때 유용하며, 개발의 우선 순위를 구분할 수 있습니다. 개발이 필요한지, 단순 콘텐츠 화면인지 파악하여 설계의 우선 순위를 설정한다면, 제한된 일정과 자본을 효율적으로 관리할 수 있습니다.
그 외
로그인이 필요한 화면인지, 화면의 삭제/추가/변경 여부 등 IA를 작성하는 목적에 따라 다양한 분류를 추가하여 목적을 효과적으로 달성할 수 있습니다. 특히 에이전시의 경우 기획, 디자인, 퍼블리싱, 개발의 각 파트별 작업 현황을 파악할 수 있습니다.
IA는 언제 작성하면 좋을까?
서비스가 복잡하고 화면의 수가 많아 정리가 필요할 때
신규 서비스 구축 시 화면설계를 진행하기 앞서 작업 우선 순위를 선정해야 할 때
디자이너, 개발자가 작업 시 필요한 화면 간 연관성을 제대로 알지 못할 때
메뉴구조도란?
웹∙앱에서 구성된 전체 메뉴 및 서비스를 쉽게 파악할 수 있도록 메뉴의 구조를 시각화한 문서입니다. 앞서 설명한 IA와 많이 비슷해 보일 수 있지만, IA와 달리 메뉴 및 서비스 단위로 작성하기 때문에 보다 간결하게 쉽게 구조를 파악할 수 있습니다. 예를 들어 규모가 큰 웹∙앱 ‘GNB(Global Navication bar)’를 펼쳤을 때 사이트맵에서 보이는 화면들이 메뉴구조도라고 할 수 있습니다.
어떻게 작성할까?
네이버 메뉴구조도 <출처: 본인>
Depth
메뉴나 서비스를 최소 단위의 기준으로 잡기 때문에 최종 진입 화면까지 작성하지 않습니다. 예를 들어 로그인 화면에서 IA는 회원가입의 시작부터 완료까지, 아이디/비밀번호 찾기 시작부터 완료까지 보이는 모든 화면을 Depth를 따라 작성합니다. 하지만 메뉴구조도는 아이디/비밀번호 찾기, 회원가입까지만 작성합니다. 보통 최대 3Depth 까지만 작성합니다.
라벨
삭제, 추가, 변경 등 여러 상태에 따라 색상별 라벨을 활용하여 이해관계자들의 작업이해도를 높일 수 있습니다. 라벨마다 시트를 따로 추가하여 정리하기도 합니다.
사이트맵 참고
웹페이지들의 사이트맵 <출처: 본인>
우리가 흔히 볼 수 있는 메뉴구조도는 웹사이트의 ‘사이트맵’입니다. 사이트맵은 사용자가 해당 웹사이트에서 원하는 서비스를 한눈에 찾을 수 있도록 링크를 정리한 화면입니다. 서비스까지만 작성해서 보여주는 메뉴구조도와 흡사하기 때문에 사이트맵을 참고하면 쉽게 메뉴구조도를 작성할 수 있습니다.
언제 사용하면 좋을까?
신규 서비스 및 리뉴얼 진행 시 변경, 추가, 삭제 등의 서비스 변동 사항을 한눈에 파악할 때
규모가 큰 서비스의 경우, IA를 확인하기 전에 전체적인 형태를 확인할 필요가 있을 때
규모가 작은 서비스의 경우, 화면설계와 IA(화면 구분, 구조 및 기능 정보)를 같은 문서로 사용해서 IA의 일부 역할을 대체할 때
화면목록이란?
IA와 비슷하게 서비스의 모든 화면을 리스트로 정리한 문서입니다. 생김새만 본다면, ‘IA를 작성하면 되는 데 굳이 화면목록이 왜 필요할까?’라고 생각할 수 있습니다. 그렇지만 실제로 에이전시에서 프로젝트를 수행하는 기획자라면 IA와 화면목록을 구분하여 작성하는 경우가 대부분입니다. 보통 에이전시 프로젝트의 업무 방식은 화면 ID만으로 진행되며, 각 화면에 대한 기획 – 디자인 – 퍼블리싱 – 개발이 이루어지기 때문입니다. 따라서 화면별 많은 정보가 기재된 IA를 보는 것보다 간결하게 화면의 대략적 경로와 ID만 기재된 화면목록을 보며 작업하는 것이 가독성을 높여 업무를 효율적으로 진행할 수 있습니다.
1,000개를 넘는 화면목록 내 각각의 화면들은 기획 – 디자인 – 퍼블리싱 – 개발 작업의 기준이 됩니다. 따라서 이들은 중복되지 않는 고유의 화면명과 ID값을 갖고 각 작업자들에게 공유됩니다.
어떻게 작성할까?
화면목록 예시 <출처: 본인>
Depth
IA에서 작성했던 방법대로 Depth를 구성합니다. 다만, 화면목록은 결국 화면 ID와 화면명이 일치하는 것이 중요하기 때문에 Depth로 구분하지 않더라도 화면까지의 Location(Bread crumb, 경로) 정도만 표기하면 이해관계자들이 쉽게 화면에 대해 파악할 수 있습니다.
화면 ID
화면 ID 가이드 예시 <출처: 본인>
수많은 화면을 개별로 구분하기 위해 화면 ID를 부여합니다. ID 가이드는 정하기 나름이지만, 다음의 예를 많이 사용합니다.
1~2 Depth 메뉴명 약자: 대메뉴의 영문 이름을 알파벳 대문자 2개로 줄여 사용
Depth 별 구분 코드: Depth 별 숫자로 구분하여 화면 간 규칙 부여
화면 형태 구분 약자: IA를 참고하여 화면의 형태를 구분해서 사용
그리고 위의 가이드를 작성할 때 가장 중요한 아래 사항을 염두해야 합니다.
ID가 중복되지 않아야 함
이미 존재하는 ID의 변동(수정, 삭제 등)이 발생할 경우 ID를 재사용하지 않아야 함
중복되는 ID를 사용하면 수많은 화면을 검색하여 찾을 때 혼란이 발생할 수 있으며, 이미 존재했던 ID를 폐기하지 않고 재사용한다면 Depth별 구분 코드를 적용할 때 중복값이 나타날 수 있습니다.
Tip. 화면 ID를 엑셀로 정리할 때 =CONCATENATE 함수를 사용하면 수월하게 작성이 가능합니다.
언제 사용하면 좋을까?
많은 화면의 수를 다양한 이해관계자가 알고 있어야 할 때
IA 내 너무 많은 내용이 있어 문서의 가독성을 높이고 싶을 때
적재적소에 문서를 활용해야 효율이 높다
기획자는 IT 업계에 정형화된 문서들을 잘 이해하고 있어야 회사의 환경에 맞게, 일하는 목적에 맞게 문서를 활용하여 업무를 효율적으로 진행할 수 있습니다. 물론 회사마다 문서의 양식, 목적이 다르기 때문에 위에서 나온 내용이 무조건 정답이 될 수는 없습니다.
특히 IA, 메뉴구조도, 화면목록은 비슷한 구조라서 초보 기획자가 헷갈릴 수 있습니다. 하지만 회사의 표준 업무 프로세스가 정해져 있지 않은 상태이거나 혹은 IA를 구축하는데 있어 문서의 생김새와 목적에 대해 정보가 부족했던 분들에게 이번 글이 조금이나마 도움이 되었기를 바랍니다.
요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.
웹, 모바일을 위한 I.A(Information Architecture, 정보구조도)
안녕하세요, Jlight입니다.
이번 시간에는 서비스 설계의 기초인 정보 구조도(Information Architecture) 에 대해서 알아보겠습니다.
I.A.의 기초 이론과 역할 그리고 구조도 작성법에 대해 알아보도록 하겠습니다.
그럼 본격적으로 들어가볼까요?
I.A(정보 구조도)란?
I.A.는 간단하게 말해서 서비스의 목차 역할을 수행합니다.
웹 혹은 어플리케이션이 어떻게 구성되는지 보여주며 어떤 기능의 화면으로 보여지는지를 전체적으로 보여주는 도구입니다.
이를 통해 개발자와 디자이너가 편하게 작업할 수 있도록 만든 문서이기도 하며
기존 웹 사이트처럼 복잡한 구조에서 사이트의 틀을 짜고 콘텐츠 구성 뿐만 아니라 디자인,개발의 일정 관리도 통합해서 진행하였기 때문에 역할이 중요하였습니다. 그러나 모바일 서비스가 많이지면서 한 페이지가 다수의 페이지 역할을 대신하면서
개발 페이지 목록의 역할이 강해지고 있는 추세 입니다.
자세하게 들어가기 전,
I.A.에 대해 간단하게 알아보도록 하겠습니다.
여기 아주 귀여운 강아지 모형이 있습니다!
이 귀여운 강아지 모형은 어떻게 구성되있을까요?
강아지 모형을 보면,
귀여운 머리와 둥글한 몸통으로 구성되어있습니다.
조금 더 자세히 들여다 볼까요?
머리를 보면, 머리에는 눈과 코, 입 그리고 귀로 구성되어 있습니다.
몸통도 그 안을 드려다 보면 발과 팔 그리고 꼬리로 구성되어 있죠!?
여기서 조금 더 자세히 들여다 보면
눈에는 왼쪽. 오른쪽 눈이, 코에는 왼쪽, 오른쪽 코가 아니라 코는 하나죠?
이처럼 더 자세히 들여다 보면 또 다른 구성요소가 존재합니다.
강아지의 모형을 보고 어떠한 구조로 되어있고
그 구조 안에 어떠한 구성요소로 만들어져 있는지 알 수 있듯
우리 서비스가 어떠한 구조로 되어있고 어떤 기능이 있으며 어떤 역할을 수행하는지
서비스에 대한 전체적인 구조를 짤 수 있는 것이 바로 I.A.입니다.
그렇다면 I.A.는 어떻게 작성 되어야 할까요?
I.A.설계 시 고려 사항
I.A설계 시 기획자는 User(사용자), Contents(컨텐츠) 및 Scenario(시나리오) 3가지를 고려하여 작성합니다.
우선 User(사용자)에서는 크게 3가지를 고려합니다.
1. 사용자가 기존에 어떠한 경험을 가지고 있는가
2. 우리 서비스에 왜 방문하고 어떤것을 얻고자 하는가
3. 사용자는 이용 중에 어떠한 패턴을 보이는지
우선 첫번째, 기존에 사용자의 경험을 우리 서비스에 담아야 합니다.
사용자가 우리 서비스에 들어왔다고 가정해봅시다. 그러나 우리가 구조를 설계할 때 기존 사용자가 가지고 있지 않던
새로운 구조를 가진 사이트를 기획했습니다. 완전히 새로운 배치로 새로운 구성 요소들을 배치 하였을때 사용자는 어떻게 느낄까요?
사이트가 어렵고 복잡하게 느껴질 것 입니다. 일반적인 사이트의 구조가 아닌 새로운 구조에 적응이 어렵기 때문입니다.
따라서 우리는 기존 사용자의 경험을 분석하여 설계 해야합니다.
또한 우리 서비스에 들어온 목적과 패턴을 분석함으로써 구성 배치를 사용자의 편의를 고려하여 설계합니다.
Contents(컨텐츠)에서는 두가지
1. 컨텐츠의 중요도가 공급자 중심인가 사용자 중심인가
2 사용자가 인지하고 있는 네이밍인가
우리가 구조를 짜고 컨텐츠를 구성할 때 중요한 요소가 공급자 중심인가 사용자 중심인지를 결정해야합니다.
이게 어떤 말인지 예시를 통해 알아볼까요?
만약 우리가 음악을 들을 수 있는 어플리케이션을 만든다면
월 구독을 통해 수익을 벌어들일겁니다. 즉 구독 서비스가 우리의 수익모델입니다.
그러면 우리는 더 많은 사용자들이 구독을 할 수 있도록 구독에 대한 알림 혹은 배너를 노출시킬 것입니다.
그러나 이러한 배너 노출은 사용자 관점에서 좋은 UX를 제공하지 못합니다.
구독을 장려하는 배너 대신에 우리가 다른 컨텐츠 혹은 정보를 제공해준다면 사용자에게 더 좋은 가치를 제공할 것입니다.
이처럼 우리는 구조를 짤 때 우리 공급자 중심인지 혹은 사용자 중심인지를 결정해야 합니다.
또한 이 전에 설명한 것 처럼 기존 경험을 토대로 구성해야 하기 때문에 익숙한 네이밍을 사용해야합니다.
마지막으로 정보의 시나리오가 어떻게 전달되어야 하는지를 고려함으로써 정보 구조도를 설계합니다,
I.A.의 종류
웹 사이트 / 모바일에 따라 I.A의 기본적인 구조가 달라집니다.
이것을 구분하기 전 I.A의 보여지는 모양에 따라 크게 2가지로 나누어집니다.
트리 구조의 I.A.
마인드맵 혹은 트리구조의 I.A.
마인드맵이나 트리 구조 를 이용하여 고객의 동선 별 화면 구조를 정의합니다.
사실 I.A의 산출물은 대부분 엑셀 형식으로 자세히 작성하는데, 이를 작성하기 전에
조금 더 간편하고 직관적으로 구조를 작성할 수 있다는 장점이 있습니다. 이 때 우리는 한 화면 내 통합할 수 있는 기능들을 통합시키면서 구조의 깊이(depth)를 최소화 합니다.
엑셀 형식의 I.A
출처 : 웹 어벤져스
들어가기에 앞서 한가지 알아야할 점이 있습니다.
”
정보 구조도에는 정답이 없습니다.
”
정보 구조도의 형식과 틀은 상황에 따라 유동적으로 변하기 때문에 I.A가 무엇인지 그리고 어떠한 역할을 하는지 이해하고
상황에 맞게 짜는 것이 중요합니다.
다시 들어가 볼까요?
설계서 상단을 보면 도메인, 개발언어, 호스팅, 개발 기한이 적혀져 있습니다.
도메인에는 우리 웹 사이트의 주소를 작성, 어떠한 언어로 개발되며 호스팅 및 보안 서버는 어떠한 것을 이용하는지.
개발 기한이 언제인지 작성합니다. 사실 이 부분에서 간단히 프로젝트 담당자 및 프로젝트 기한, 프로젝트 명을 작성하는 경우도 있으니 참고해주세요.
메인으로 들어가보겠습니다. 항목별로 순서대로 좌측부터 접근하면,
Depth(깊이), Tab/서브 플로우, Code, 페이지 정의/요구사항, 세부 사항, Page, 개발 구분, 논의 사항으로 구성됩니다.
우선 Depth는 서비스의 전체적인 틀과 깊이를 작성합니다,
이 문서에서는 페이지가 최대 3개의 Depth로 구성되며
1Depth에서는 회사소개, 사업분야, 포트폴리오, 고객지원, 마이페이지, 회원가입으로 구성되어있습니다
회사 소개 안에는 또 다른 Depth가 존재하며 소개, 인사말, 현역소개, 오시는 길으로 구성됩니다.
따라서 Depth에서는 문서의 깊이 별로 어떠한 구성 요소가 존재하며 Depth별로의 컨텐츠의 네이밍을 포함합니다.
다음은 Code입니다. 페이지명 또는 화면 코드를 작성하며 이는 규칙으로 정의, (예시 : Order001B)
화면에 대한 네이밍을 토대로 번호를 구성하여 작성합니다. 이 문서에서는 화면에 네이밍 없이 단순히 1.1, 1.2, 2.1 등으로 구성하였습니다.
페이지 정의/요구사항에서는 화면에 대한 설명을 작성하며
Page에서는 그 페이지의 개수를 표현합니다. 게시판 형태라면, 몇 페이지 까지 페이지를 구성하는지 표시하는 것 처럼 이곳에서 이를 작성합니다. 그리고 개발 구분을 통해 전체적인 진척도 파악 및 개발 현황을 보여줍니다.
각 화면 요소에 대해 얼마큼 개발이 완료되는지 전체적인 프로젝트 일정 관리를 I.A를 통해서 할 수 있습니다.
논의 사항에서는 항목 별로 상의 되어야 할 정보를 작성합니다.
지금까지 하나의 I.A의 예시를 바탕으로 전체적인 흐름을 설명하였습니다.
그러나 사실 이러한 엑셀 형식의 I.A는 모바일에서는 작성하기에 어려움이 있습니다.
그렇다면 모바일 서비스는 I.A를 어떻게 작성해야 할까요?
모바일을 위한 Information Architecture
앱 메뉴 구조도 출처 : 세균무기
모바일에서는 다음과 같이 서비스의 흐름 및 네비게이션 바(없으면 생략)를 포함하여 구조를 작성합니다.
앞서 설명 드린 트리 구조와 동일합니다.
처음부터 볼까요?
우선 어플리케이션을 처음 시작할때 보여지는 스플래쉬 화면에서 튜토리얼을 거쳐 로그인/회원가입 페이지로 넘어갑니다.
여기서 인증을 거치면 프로모션 팝업이 나타나며 홈 화면으로 넘어갑니다.
화살표(->)를 통해 흐름을 나타내는 것을 알 수 있습니다.
홈 화면으로 넘어가면 네비게이션 바가 보입니다.
여기서 네비게이션 바는 사용자가 원하는 정보를 빠르고 정확하게 검색하고, 정보와 정보 사이의 이동을 원활 하게 돕기 위해 제공하는 것으로 검색기능, 사용자위치정보, 리스트메뉴, 탭메뉴, 토글 메뉴, 사이트맵 등의 체계를 말합니다.
카카오톡의 네비게이션바
다시 I.A.로 넘어가볼까요?
노란색 박스로 표시된 영역은 네이게이션 바의 구성 요소를 설명합니다.
그 박스 밑에 적힌 영억은 그 화면에서 들어가는 정보들을 표시합니다.
홈 메인 화면 안에는 알림, 사용내역, 보내기, 입출금 등의 내용이 표시됩니다.
이 화면이 단순히 구조와 네이밍을 적고 간단한 기능을 적었다면
앱 상세 구조도를 통해 각 구성요소에 대한 자세한 설명이 포함됩니다.
앱 상세 메뉴 구조도 출처 : 세균무기
전 그림에서 그린 I.A.보다 더 세부적인 내용을 포함합니다.
보내기 기능 안에서도 보안 비밀번호 등록, 이체 정보 등이 있다는 것을 자세하게 설명합니다.
단순히 앱 메뉴와 흐름을 설명하는 것과 비교해 더욱 자세한 내용을 포함하고 있는 것이 바로 앱 상세 메뉴 구조도입니다.
보다 상세한 내용과 서비스의 전체적인 흐름을 설명할 수 있습니다.
”
결국 I.A.는 개발자와 디자이너를 위한 도구이다.
”
I.A.를 통해 우리 서비스의 전체적인 구조를 파악할 수 있다고 말했습니다,
디자이너는 이를 통해 우리 서비스가 어떤 구조를 가지고 있으며 각각의 뷰가 담는 정보들을 바탕으로 와이어프레임이라는 청사진을 작성하게 됩니다. 사실 와이어프레임은 기획자가 작성하는 경우가 대부분인데
디자이너보다 UX적으로 약하기 때문에 디자이너가 뷰를 보고 재수정하는 작업을 거치게됩니다.
재수정 작업에서 구조도가 없다면 정해진 틀에서 일부 배치만 수정하겠지만, 구조도를 기반으로 작성을 한다면
보다 사용자 친화적인 서비스 설계에 용이하며 새로운 틀의 서비스를 만들 수 있습니다.
개발자 역시 I.A를 통해 서비스의 전체적인 틀을 잡으며 안에 구성된 정보들을 바탕으로 개발에 착수합니다.
결국 기획자는 정확한 I.A.를 기반으로 디자이너 및 개발자와 소통해야 하며 원할한 개발 환경 조성을 할 수 있습니다.
(스토리보드라는 설계의 최종 산출물이 있는데 이는 추후 포스팅에서 자세히 다루어보도록 해요:) )
이번 포스팅을 통해 서비스 설계의 첫 단추인 I.A.에 대하여 알아보았습니다.
처음 접해보셨다면 당연히 어려우셨을 것이며 알고 계신 분들은 한가지 의문이 들 수 있습니다.
나는 저렇게 안짰는데? 당연합니다.
아까 설명드렸듯이 I.A에는 정답이 없습니다. 우리 서비스 그리고 팀 환경과 역량의 설계서를 작성해야 합니다.
다음 포스팅에서는 서비스 설계의 청사진인 와이어프레임에 대하여 알아보겠습니다.
서비스 구조도 분석 양식
반응형
사이트 기준으로 서비스를 개선하거나
리뉴얼할 때
메뉴 구조를 분석해야 한다.
서비스하고자 하는 구조를 명확하게 잡아야
목적에 맞는 온라인 서비스를 제공할 수 있다.
서비스 구조도 분석 양식
홈, 상단, 푸터, 메뉴 구조에 대해서 1 depth,
2 depth, 3 depth로
구성하면서 서비스 성격별로 그루핑 한다.
서비스 구조도 분석 양식
기능 정의서 구현전에 3 Depth 정도까지
구현해 두면 좋다.
보통 복잡한 사이트 일 수록 Depth 가
복잡하고 깊다.
서비스 구조도 분석 양식
프론트와 같이 어드민에도 구조도를 잡으면서
사용자 화면부터 관리자 화면까지의
연계고리를 고려하면서
서비스 구조도를 구성하는 것이 포인트이다.
# 관련 양식 첨부 : 서비스 IA 기획서 양식
“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”
반응형
UI디자인
UI 정보구조 설계하기
스토리보드 흐름 구체화
와이어프레임에 기반을 두어 표현되는 정보와 기능에 따른 상세 스토리보드 흐름(flow)을 기획할 수 있다.
스토리보드의 정의
스토리보드의 구성
스토리보드는 앱을 개발하기 위한 기초 설계 도면으로 디자이너 및 개발자가 참고하는 최종적인 산출문서라고 할 수 있다.
화면 구성이 어떻게 보여 질것이며 다음 화면이 어떻게 전개될지 알려주는 것으로 각 화면에 대한 화면 정의서, 기능 정의서, 데이터베이스 연동 등 구축을 위한 모든 정보가 담겨 있는 문서이다.
앱 서비스 제작의 단계에서 스토리보드는 실제 제작의 전단계이며 요구 분석, 정보구조 설계, 서비스 흐름도 작성 후 최종 문서로서 해당 문서를 바탕으로 커뮤니케이션을 하게 된다.
메뉴 구조도
메뉴 구조도 정의 : 메뉴 구조도는 앱 공간의 형태를 시각적으로 보여주며, 메뉴와 각 메뉴의 기능을 문서로 정리 한 것을 말한다.
메뉴 구조도 기능 : 메뉴 구조도는 앱 개발자와 디자이너를 위해서 각 업무에 대한 요약이나, 기본적인 사항들을 기록하는 기능을 한다. 페이지와 다른 정보 요소 간의 관계, 흐름, 과정을 보여주기 때문에 정보구조를 파악하는데 도움을 줄 수 있다.
스토리보드 작성 단계
앱의 설명 및 개요 문서 명, 개정 이력, 디렉토리, 작성일자, 업데이트 기록, 기재해야 할 중요사항 등 앱에 대한 전반적인 개요를 명시한다. 앱의 주요 목적과 타깃, 어떠한 기능을 제공하는 앱 인지 가장 핵심적인 콘셉트만 대표 화면과 함께 요약해서 작성한다.
시스템 구성도(system configuration diagram) 앱의 형태가 연동형 앱인 경우에는 단말기가 어느 위치에 있는 어떤 서버와 통신을 하는지 한눈에 볼 수 있는 시스템 구성도를 작성해야 한다. 시스템 구성도가 문서화되어 있으면 향후, 향후 서비스에 문제가 발생하는 경우에 빠르게 대응할 수 있다.
서비스 흐름(service slow) 메인페이지로부터 각각의 서브 메뉴들이 어떤 화면들을 거쳐서 진행되는지 과정을 보여주는 화면을 말한다. 예를 들어 어떤 특정 버튼을 누르면 어떤 이벤트가 발생하는지, 다음 화면은 무엇인지, 어떤 화면에서 서버와 통신이 발생하여 공지사항 리스트를 가져오는지 등을 표시해 한 메뉴에 대한 전반적인 이용 과정의 흐름을 한 눈에 보여주는 것이다. 와이어프레임 상에서 발견하지 못한 서비스 흐름상의 문제를 짚어볼 수 있다. 사용자가 앱을 이용하는 도중에 메뉴들의 구성이 엉키거나, 혹은 그 흐름이 끊어지는 현상이 발생하지 않는지 확인하는 과정인 것이다.
메뉴별 화면 설계도 작성 및 상세 설명 메뉴에 대한 서비스 흐름도 작성이 완료되면, 각각의 화면에 대한 상세 설명 페이지를 작성한다. 상세 설명 페이지는 보통 이등분 해, 좌측에는 화면의 UI를 보여주고, 우측에는 UI에 대한 설명을 기입한다. 설명은 디자이너에게 필요한 화면 설계에 대한 내용을, 그리고 개발자나 알아야 할 개발 사항과 관련된 내용을 명시한다.
추가 관련 정보 작성 메뉴별 화면 설명은 구체적이고 이해하기 쉽게 설명하는 것이 바람직하며, 연결되는 서버가 있다면 해당 URL이나 관련 정보도 같이 작성한다. 프로그램 요소나 스크립트 기능, ASP나 PHP 등의 프로그램 등을 표시하고, 그 기능에 대해 설명한다.
작업 스케줄 구성 앱 기획안의 초기 단계인 기획부터 개발 완료까지의 스케줄을 정리한다.
스토리보드 작성 시 유의사항
일관된 기호의 표시 : 스토리보드 작성 시에는 많은 페이지를 다루기 때문에, 내용을 작성하는 방법이나 기호, 번호 등에 일관된 방식을 사용하여 내용을 명확히 전달하여야 한다.
공통 영역의 정의 : 상단 메뉴나 하단 내용(푸터), 퀵 메뉴 등 화면내의 공통 영역에는 페이지마다 같은 표식을 함으로써 중복해서 표현하지 않게 하는 것이 바람직하다.
영역별 세부 설계 : 스토리보드의 영역별 세부 설계 시, 각각의 영역을 명확히 구분한 다음 세부적인 설명을 기술하여 해당 내용을 쉽게 이해할 수 있도록 한다.
버전업 관리 : 스토리보드는 작성 이후에 변경사항이 자주 발생하기 때문에, 갱신 시 버전과 날짜를 기록하여 효율적인 관리가 되도록 해야 한다.
스토리보드 작성 도구
앱 스토리보드 제작 도구(storyboarding tool)
스토리보드 작성 방법은 와이어프레임과 같이 스케치를 이용하기도 하며, 제작 도구를 이용하기도 한다.
웹과 모바일에 관련된 기획 업무에서 스토리보드를 작성하게 되는데, 파워포인트나 이미지 편집툴을 사용하는 것에 비해 쉽고 빠르게 스토리보드를 작성할 수 있는 도구에는 파워 목업(http://www.powermockup.com), 발사믹(http://www.balsamiq.com) 등이 있다.
기획서(스토리보드) 작성 방법
연관 글
메뉴트리(Menu Tree) 란
메뉴트리는 말 그대로 각 사용자가 사용하는 메뉴(menu)의 Tree 구조를 이야기합니다.
앞서 작성한 문서를 통해 설계된 항목을 메뉴로 한정하여 실제 UI 상 화면 메뉴를 구성하는 방법으로 접근할 수 있습니다
메뉴트리 작성의 목표
메뉴트리를 통해 화면 구성 설계를 목표합니다.
사용자의 동선이 끊기지 않는 메뉴구조 설계 등의 부가적인 목적이 있습니다.
추가로 메뉴트리를 통해 개발 과정에서의 계층구조 (hierarchy)를 수립하는데 용이하게 동작합니다 자세한 내용은 추 후 다른 주제(개발자와 협업하기 편)에서 다룰 예정입니다
메뉴트리 작성 방법
메뉴트리는 작성자의 성향에 따라 Flow chart, 엑셀 등 여러 형태를 가질 수 있습니다.
메뉴트리에서는 권한 및 인증에 따라 달라지는 메뉴를 명시적으로 표현하는데에 포인트가 있습니다. 이 과정에서 각 메뉴(기능)의 명확한 카테고라이징이 진행됩니다 과도한 depth를 지양하여 사용자에게 편리한 동선을 제시합니다
다른 글과 마찬가지로 토이프로젝트로 진행하는 스터디 매칭 플랫폼의 예시입니다.
관리자 웹 메뉴트리
사용자 앱 메뉴트리
정리
상기 예시를 참고하면 메뉴트리는 아래와 같이 정리할 수 있습니다
메뉴트리의 형태는 정해져있지 않다
상기 관리자 웹 메뉴트리의 경우 횡(가로) 형으로 작성되었으며, 사용자 앱 의 경우 종(세로) 형으로 작성되었습니다
메뉴트리의 경우 횡(가로) 형으로 작성되었으며, 의 경우 종(세로) 형으로 작성되었습니다 권장하는 바는 실제 서비스 내에서 보여지는 GNB / LNB / FNB 구조와 비슷하게 푸는 방안이 좋습니다. 다만, 실제 기획서(파워포인트, confluence 등) 작성 환경에 따라 작은 화면안에 풀어내기 어려운 경우 형식에 대한 부분은 상세 기획 화면에서 기술해도 무방합니다.
이때, 메뉴트리의 작성 목적을 상기하며 작성하는것이 중요합니다.
권한에 의한 메뉴 노출 기준을 수립한다
권한에 연관된 화면 분기에 있어 필수성 또는 필요성이 크지 않다면 동일한 구성요소(component & feature)가 많은 경우 하나의 화면에서 메뉴(기능)의 노출 여부를 결정해주는 방법을 권장드리는 편입니다.
본 예시에서는 색상으로 구분해 두었습니다.
주의사항은 공통된 메뉴의 하위 구성요소에 차이가 있는경우에 해당 되는 점을 꼭 참고 하셔야합니다.
카테고라이징(Categorizing)을 명확히 한다
이 부분은 관리자 웹 메뉴트리를 참고하시면 좋습니다.
메뉴트리를 참고하시면 좋습니다. 웹의 경우 통상적으로 각 메뉴의 명칭을 그대로 표현하는 편이며 이 과정에서 사용자(관리자도 사용자로 접근합니다)가 하고자 하는 행위가 어느 메뉴에 있을지를 충분히 예상하고 접근할 수 있도록 유도합니다.
앱의 경우 플랫폼 특성 상 적은 화면에 많은 내용을 보여주기 어려움에 따라 아이콘(icon)으로 대체하는 경우가 많음에 따라 개인적으로는 가능한 depth를 줄이는 방향으로 설계합니다 예시로 모집중인 스터디 , 참여중인 스터디 , 스터디 만들기(신규등록) 의 경우 스터디 라는 큰 메뉴로 카테고라이징할 수 있습니다 그럼에도 불구하고 나뉘게 된 이유는 아래와 같은 요소가 있을 수 있습니다. 전제 : 인스타그램/페이스 북과같은 하단 탭 구조 설계 스터디 탭으로 구분 시 하위 depth를 표현하기 위해 별도 서브 메뉴 (상단 탭)이 필요할 수 있다. 상단 탭이 추가되는 경우 사용자의 인터랙션 동선이 아래에서 위로 계속 움직여야 하는 불편함이 있을 수 있다. 상단 탭 영역을 하위 depth로 사용하는 경우 추 후 상단 바(뒤로가기 등이 있는 네비게이션 바)의 인터렉션이 겹칠 수 있다.
사실 위 내용 중 동선이나 사용성에 대한 내용은 유저의 사용성에 따라 다르게 인식될 수 있는 부분입니다.
포인트는 메뉴트리 설계 시 어느정도 화면에 대한 설계가 함께 이루어짐에 따라 추 후 서비스의 확장성을 감안하여 수립하는 것도 방법이 될 수 있습니다.
이어지는 글 이어지는 글에서는 공통규칙(Common Rule)에 대해 작성될 예정입니다
본 블로그 글은 작성자의 기준에서 작성된 내용이며 참고용으로만 이용해주세요
양식(샘플)
안녕하세요~ 😀
오늘은 기획자가 많이 작성하는 문서 중 ‘메뉴구조도’에 대해서 알아보려고 합니다.
메뉴구조도는 무엇이며, 언제 사용하고, 어떻게 작성하는지에 대해서 제가 작성했던 양식을 바탕으로 간단하게 설명드리겠습니다.
” 메뉴구조도란? ”
메뉴구조도는 사이트에 구성되어야 하는(혹은 구성되어 있는) 페이지를 트리형태로 표현한 문서로 보통 메뉴 간의 상/하관계와 기능 등을 엑셀로 작업하는 문서입니다.
조금 더 쉽게 설명을 해드리면 홈페이지에 있는 메뉴들을 연관 있는 것끼리 모아서 정리를 한 문서라고 생각하면 됩니다.
제가 좋아하는 회사 중 한 군데인 ‘네이버(NAVER)’ 홈페이지를 예를 들어 설명을 드리겠습니다.
https://www.navercorp.com/naver/company
위 링크에 접속을 하면 상단에 ’네이버 | 서비스 | 가치실현 | 홍보 | 투자정보 | 채용’ 이라는 메뉴가 보입니다.
이러한 메뉴들은 1Depth로 표현을 하며, 네이버그룹 홈페이지에서 많은 메뉴들을 6개의 대표그룹으로 구성해놓았다고 생각하면 됩니다.
(물론, 1Depth의 메뉴이지만 메인 등에서 노출을 시키지 않는 경우도 존재합니다)
이번에는 1Depth 처음에 위치한 ‘네이버’라는 메뉴를 클릭하면 하단에 ‘네이버’ 메뉴와 연관이 있는 서브메뉴들이 노출됩니다.
여기서 ‘NAVER | 주요관계사 | 제휴제안 | CONTACT’가 2Depth가 됩니다.
그 다음으로는 ‘제휴제안’ 하단에 위치한 ‘제휴제안 안내 | 제휴제안 등록 | 검토현황 조회’ 메뉴가 3Depth 메뉴가 됩니다.
메뉴구조는 깊이가 깊을수록 사용자 편의성에 좋지 않기 때문에 3Depth로 구성하는 경우가 많지만 4Depth가 존재하거나 TAB 등이 존재할 수 있습니다.
이렇게 사이트의 전체적인 메뉴 정보들을 한눈에 알아볼 수 있도록 그룹화한 것을 메뉴구조도라고 말합니다.
” 메뉴구조도는 언제 사용하나요?”
메뉴구조도를 작성하는 이유는 다양합니다.
저의 경우에는 벤처기업과 중소기업(SI업체)에 다닐 때 주로 메뉴구조도를 작성하였으며 이유는 다음과 같았습니다.
1) 제안서 작성을 위한 사전조사
2) 시스템(홈페이지) 신규 구축
3) 시스템(홈페이지) 고도화/리뉴얼
SI업체의 경우 새로운 사업에 참여하기 위해 제안서를 작성 하는데 이때 가장 기본이 되는 사항은 기존 시스템을 분석하고 이해하여야 합니다.
‘현재 ㅇㅇ홈페이지의 구조는 어떻게 되어있는지? 어떤 기능들이 있는지? 어떤 불편함이 있는지?’ 등을 분석해야 하는데, 이때 가장 먼저 진행을 해야 하는 부분이 메뉴구조도 작성입니다.
또한, 시스템을 신규 구축 하는 경우에도 메뉴구조도를 작성해야 합니다.
현업의 요구사항을 모두 수집 및 분석한 다음에 요구사항 어떤 메뉴에 어떤 식으로 적용시키고 이러한 메뉴들을 어떻게 구성을 하면 좋을지 등을 메뉴구조도에 1차적으로 표현합니다.
메뉴구조가 잘못 세워지는 경우에는 화면설계 등을 할 때 지장이 갈 수 있으므로 꼼꼼하게 메뉴 간의 관계와 사용자 편의성 등을 고려하여 설계를 하는 것이 좋습니다.
” 메뉴구조도는 어떻게 작성하나요? ”
메뉴구조도는 딱 정해진 양식이 없습니다.
저 또한 메뉴구조도를 작성하는 목적, 플랫폼 유형, 팀구성원 등에 따라 다르게 작성을 하는 편입니다.
1) 목적
– 신규로 구축해야 하는 시스템인 경우 : 요구사항을 바탕으로 1차적으로 메뉴 구성을 한 뒤, 이러한 메뉴를 다시 그룹화하는 방식으로 진행
– 제안서 작성을 위해 분석하는 경우 : 현재 시스템의 메뉴구조 및 기능을 그대로 작성
– (2개 이상의) 홈페이지를 통합하는 경우 : 각각의 홈페이지의 메뉴구조 및 기능을 1차적으로 작성 한 뒤, 통합 가능한 메뉴와 불가능한 메뉴를 분류
2) 플랫폼 유형
– WEB : 앞에서 설명한 방식대로 메뉴구조도 작성
– APP : 메뉴의 상/하관계를 고려하여 메뉴구조도를 작성하지만 메뉴간의 이동을 할 수 있는 부분을 함께 기재
3) 팀구성원
– 메뉴구조도를 작성할 때 함께 프로젝트를 진행할 팀원들의 이해를 돕기 위하여 각 메뉴의 기능(CRUD)까지 같이 기재하는 경우도 존재
– 참고사항 : CRUD는 데이터베이스 기준으로 개발자분들이 작업을 하는 부분이지만 기획단에서 이러한 부분을 정리해 주는 경우도 있음
: 팀원에 따라 이러한 CRUD를 작성해 주는 것을 좋아하는 사람도 존재하는 반면 월권이라고 생각하는 사람도 존재함
: C – 생성, R – 조회, U – 업데이트, D – 삭제
” 메뉴구조도 작성 공부하는 Tip ”
메뉴구조도 작성 공부하는 Tip
1) 대기업 그룹 홈페이지에 접속합니다. (네이버그룹, 삼성그룹, 카카오그룹, CJ그룹, 현대그룹 등)
2) 메뉴들을 다 클릭하면서 메뉴구조도를 1차적으로 작성합니다.
3) 작성한 메뉴구조도와 홈페이지의 ‘사이트맵’을 비교하면서 자신이 누락한 부분이 있는지 등을 확인합니다.
4) 새로운 파일을 다시 열어 홈페이지의 메뉴들을 다시 작성해봅니다.
5) 이번에는 추가적으로 각 메뉴의 기능들을 ‘설명’ 란에 상세하게 작성을 합니다.
6) 그 이후 해당 메뉴에서는 새로운 값을 등록할 수 있는지? 삭제할 수 있는? 조회만 하는지? 등을 기재합니다.
위의 양식을 다운받고 싶으신 경우에는 브런치나 티스토리에서는 첨부파일 등록이 불가능하여 네이버 블로그에 업로드를 해두었습니다.
아래 링크를 참고하셔서 다운로드 해가시면 될 것 같습니다 😀
blog.naver.com/dreamiter/222170526698
(파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음)
[IA] 정보구조는 어떻게 그려야할까? 정보구조의 8가지 원칙
SMALL
학교에서 산학과제로 서비스 기획을 처음해보고 있는데, 앱의 화면과 메뉴구성을 기획하기위해 정보구조를 생각하지 않을 수가 없었다.
애초에 컨셉에만 너무 집중한 나머지 어떤 정보들이 구성되어야하며 어떤 정보가 메인 화면에 나오고, 하위 메뉴에 숨겨져도 되는 정보들에 대한 정의 단계가 없어서 와이어프레임을 하면서 그런 것들을생각해야하다보니 당연히 와이어프레임도 시원시원하게 그려지지 않았다.
정보구조는 서비스 기획에서 아이디어가 어느정도 구체화된 후 꼭 거쳐야 하는 단계임을 몸소 느꼈다.
정보구조 또한 탄탄한 유저 리서치를 통한 사용자 니즈와 태스크를 정확히 이해하고 비즈니스의 목표도 이해가 된 상태에서 진행되어야 한다. 앱에서 보이는 모든 메뉴들은 다 논리적인 근거에 기반해 배치된 것이다. 랜덤하게 정보를 구성해서는 안된다. 사용자가 인식하기 쉬운 카테고리의 라벨링도 중요하고, 사용자들이 기대하는 카테고리와 메뉴에 원하는 정보가 있어야 한다.
신규 서비스 기획은 물론 기존의 웹사이트나 앱을 리디자인, 개편할 때도 Content Audit 을 통해 정보구조를 파악하고 현재 콘텐츠의 퍼포먼스가 괜찮은지, 위치를 바꿀 필요는 없는지 등을 봐야한다.
정보구조에 대해 더 이해를 해보고자 서치를 좀 해봤지만 명확하게 어떻게 그리는거다라고 답은 없는듯하고
사람마다, 필요한 목적에 따라, 회사마다, 도메인마다 그리는 방식이 다양한 편인 것 같다.
결국 이것도 실무에서의 경험이 쌓여 회사 또는 팀, 개인마다 효율적인 방식으로 하는 것 같다.
현업에 계신 분들에게도 여쭤보니 피그마에 정보구조를 관리하는 팀도 있고, diagrams.io를 사용하는 팀도 있다고 한다.
툴은 다양하게 많은 편인데, 정작 어떻게 그려야할지에 대한 막연함이 있다.
정보구조에 대한 많은 디자이너, 기획자들의 의사결정을 돕고자 정보구조 전문가 댄브라운이 2010년에 만든 정보구조의 8가지 원칙이라는 것이 있다.
8 Principles of Information Architecture:
1. Principle of objects (오브젝트)
– 콘텐츠가 마치 살아있고, 생애주기 (lifecycle), 나름의 행동패턴과 속성을 가진 생명처럼 대하라.
2. Principle of Choices (선택)
– 사용자가 수행해야하는 특정과업을 위해 적절한 범위의, 의미 있는 선택지를 주어라.
3. Principle of Disclosure (노출)
– 사용자가 서비스의 각 사용단계에서 필요한 충분한 정보만을 서서히 보여주고, 그 이면에 상세한 내용이 무엇일지 예측 할 수 있도록 해라. 제공할 수 있는 모든 정보를 한꺼번에 보여주지 말라.
– UX에서 자주 언급되는 progressive disclosure 과 같은 원리이다.
4. Principle of exemplars (예시)
– 해당 정보가 어떤 콘텐츠인지 가늠이 가능하도록 콘텐츠의 예시를 먼저 보여주어라. (블로그 글을 누르기 전 목록 페이지에서 커버 사진이 먼저 보여지는 것과 비슷한 걸까?)
5. Principle of front doors (프론트 도어..?)
– 웹사이트에 많이 해당되는 원칙인데, 웹이나 앱의 방문자의 절반은 홈페이지가 아닌 다른 페이지 (검색을 통한 특정 콘텐츠 페이지)를 통해 들어온다고 생각해라.
6. Principle of multiple classification (복수 분류)
– 콘텐츠 분류를 다양화해라. 사람마다 콘텐츠를 분류하기 편한 기준이 있기 때문에 한가지 분류만을 제공하지 말라는 의미. 요즘은 다양한 필터 적용을 해서 분류를 커스터마이징 할 수 있다.
7. Principle of focused navigation (집중된 내비게이션)
– 내비게이션,에서 보여주고자 하는 카테고리의 분류가 일관되도록 해야한다. 예를들어 한 메인 내비게이션 바에서 보여주고자하는게 품목 (Product Type) 이라면 품목만 있어야한다. 품목 사이에 ‘고객지원’ 같은 서비스가 들어가 있으면 안된다는..
8. Principle of growth (성장)
– IA의 구조가 향후 추가될 콘텐츠를 수용할 수 있는지에 대한 내용. 웹사이트나 앱의 콘텐츠는 계속 성장하고 추가된다. 그에 따라 IA가 매번 바뀌면 사용자에게 혼선을 주기 때문에 향후 콘텐츠의 성장과 방향 설정이 장기적으로 기획되고 IA는 그것을 나타내야한다.
생각나는 사례들이 아직 많지 않아 원리만 봐서는 IA를 어떻게 그려야겠다라는 생각이 머릿속에 떠오르지는 않는다.
IA는 많이 그려보고 연습해야 터득이 될 것 같다!
해보면 요령이 생기겠지!
반응형
LIST
키워드에 대한 정보 앱 메뉴 구조 도
다음은 Bing에서 앱 메뉴 구조 도 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 서비스 메뉴 구조도 작성하기 2부-피그마로 내 앱 서비스 기획하기
- figma
- 피그마
- 피그마 강의
- 서비스 기획
- 기획
서비스 #메뉴 #구조도 #작성하기 #2부-피그마로 #내 #앱 #서비스 #기획하기
YouTube에서 앱 메뉴 구조 도 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 서비스 메뉴 구조도 작성하기 2부-피그마로 내 앱 서비스 기획하기 | 앱 메뉴 구조 도, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.