웹 기획이 처음인데 모르는 용어가 난무한다고요?
안녕하세요. 돈남우 형님입니다.
갑자기 회사 사장님께서 우리 회사 홈페이지를 만들라고 지시를 내린고, 지금까지 여러분이 해온 업무와 다른 분야라면 당혹스러울 수 있지요. 어느 시인이 누군가의 이름을 불러주었을 때 비로소 의미가 된다는 말을 했지요. 어떤 존재가 우리 안에 들어오기 위해서는 우리가 그 용어를 먼저 이해할 필요가 있는 것 같아요.
□ 웹 기획 (웹사이트 구축) 할 때, 개발자와 소통이 어렵다면 용어부터 공부
○ IA (Information Architecture)
IA(Information Architecture)는 정보 설계를 의미하는 웹 기획에서 자주 등장하는 용어인데요.
- 정보의 구조와 체계를 설계하는 것을 말합니다.
- 사용자가 원하는 정보를 쉽게 찾을 수 있도록 도와줍니다.
- 웹 사이트의 구조와내비게이션, 레이블링 등을 포함합니다.
IA가 하는 역할을 좀 더 살펴보면 다음과 같은데요. 정보를 체계적으로 분류하고 구성하여 사용자가 쉽게 이해하고 찾을 수 있도록 해주고 (정보의 구조화) , 사용자가 원하는 정보를 쉽게 찾을 수 있도록 도와주어 사용자 경험(UX)을 개선하기도 합니다. (사용자경험 UX 개선) 또 검색 엔진이 웹 사이트의 정보를 잘 수집하고 노출할 수 있도록 도와줍니다. (검색 엔진 최적화) 마지막으로 정보의 구조와 체계가 명확하게 정의되어 있기 때문에 유지보수가 용이합니다. (유지보수 용이성)
※ 깨알상식1
UX(User Experience) 디자인은 사용자 경험을 의미하는데요. 이는 사용자가 제품, 서비스, 시스템을 사용하면서 느끼는 전반적인 경험을 의미하는데요. 즉 제품을 사용하는 과정에서 우리 고객들이 느끼는 감정, 태도, 행동이 포함되는 것입니다. 결국 이것은 사용자가 우리가 제공하는 제품이나 서비스를 사용하면서 어떤 문제를 겪는지 파악한 이후, 사용자 경험을 향상하기 위한 솔루션을 제시하는 것을 의미한답니다. UX 디자인을 수행하기 위해서는 사용자를 조사하고, 정보구조를 설계하고, 와이어 프레임, 프로토타입 제작을 담당하는데요. 사용자의 니즈와 목표를 이해하고 사용자에게 제공하는 가치를 극대화하기 위해 최적의 경험을 설계하는 것이지요,.
반면 UI (User Interface)는 사용자가 제품을 사용할 때, 직접적으로 사용작용하는 화면, 버튼, 아이콘 등의 인터페이스 요소를 디자인하는 것을 의미하지요. 즉 UI디자인이란 의미는 제품이나 서비스의 시각적인 요소를 디자인해서, 사용자가 우리 제품 또는 서비스를 이용할 때 필요한 기능을 적절하게 배치하여 사용자 경험을 향상하는 역할을 하지요. UI 디자이너는 는 UX 디자이너가 설계한 경험을 시각적으로 구현하는 역할을 하는데요. 색상, 레이아웃, 아이콘, 버튼 등 디자인 요소를 사용해서 사용자 인터페이스를 만드는 것입니다. 결국 UX와 UI는 상호보완적으로 협업을 통해 최적의 사용자 경험을 제공하는 것이죠. 또는 이를 통합해서 UX/UI라고 부르기도 하지요.
※ 깨알상식 2
[사용자 화면 정의서]에 등장하는 용어
GNB는 모든 화면에 공통적으로 제공되는 내비게이션을 의미합니다. 반면 LNB는 특정 화면에 제공되는 네이버게이션인데요. 공통적으로 제공되는 내비게이션인 GNB의 경우에는 서비스 메뉴를 설계할 수 있는데요. 마우스를 가져다 데는 행동인 마우스 오버 시에는 서비 메뉴가 자동적으로 펼치지는 경우가 많지요.
헤더와 푸터라는 용어도 자주 등장하는 데요. 헤더는 화면의 최상단 영역을 의미하고, 푸터는 화면의 최하단 영역을 의미한답니다.
IA는 웹 사이트의 목적과 사용자의 요구에 따라 다르게 설계되는데요. 예를 들어, 쇼핑몰의 경우 상품 정보와 구매 프로세스를 중심으로 IA를 설계해야 하며, 뉴스 사이트의 경우 뉴스 카테고리와 기사 목록을 중심으로 IA를 설계해야 합니다.
IA를 설계할 때는 사용자의 행동 패턴을 분석하고, 사용자의 니즈를 파악하여 사용자에게 최적화된 정보를 제공할 수 있도록 해야 합니다. IA는 웹 기획에서 매우 중요한 역할을 하며, 웹 사이트의 성공 여부에 큰 영향을 미칩니다.
◆ IA 설계방법
| 목표 설정 | 웹사이트의 목적과 목표를 설정합니다. 사용자의 니즈와 요구사항을 파악하고, 이를 바탕으로 목표를 설정합니다 |
| 사용자 분석 | 사용자의 행동 패턴을 분석하고, 사용자의 니즈와 요구사항을 파악합니다. 사용자의 연령대, 성별, 직업 등을 고려하여 사용자를 세분화하고, 각 그룹의 특성을 파악합니다. |
| 정보 분류 | 웹사이트에서 제공할 정보를 분류하고, 각 정보의 중요도를 파악합니다. 정보를 대분류, 중분류, 소분류로 구분하고, 각 분류의 계층 구조를 정의합니다 |
| 레이블링 | 정보의 분류에 따라 적절한 레이블링을 부여합니다. 레이블링은 사용자가 정보를 쉽게 찾을 수 있도록 도와주는 중요한 요소입니다. |
| 네비게이션 설계 | 사용자가 웹사이트를 쉽게 이동할 수 있도록 도와주는 네비게이션을 설계합니다. 메인 메뉴, 서브메뉴, 링크 등을 포함합니다. |
| 화면 설계 | 정보의 분류와 레이블링, 네비게이션을 바탕으로 화면을 설계합니다. 사용자의 시선을 고려하여 화면을 구성하고, 사용자의 조작을 쉽게 할 수 있도록 버튼, 링크 등을 배치합니다 |
| 테스트 | 설계한 IA를 테스트합니다. 사용자를 대상으로 테스트를 진행하여 사용자의 반응을 파악하고, 문제점을 수정합니다. |
| 유지보수 | 웹사이트를 운영하면서 IA를 지속적으로 유지보수합니다. 사용자의 요구사항을 반영하고, 정보의 변화에 따라 IA를 수정합니다. |
※ 정부 24 사이트의 레이블링 사례
정부24 홈페이지에서는 다음과 같이 레이블링을 하고 있는데요. 대분류, 중분류, 소분류로 정보를 분류하고, 각 분류에 따라 명확하고 일관성 있는 레이블링을 부여하여 사용자가 원하는 정보를 쉽게 찾을 수 있도록 도와준답니다. 정부24 홈페이지는 대한민국 정부에서 운영하는 대표적인 공공서비스 포털로, 다양한 정부서비스와 정책정보를 제공하고 있습니다. 위와 같이 레이블링을 실천하면 사용자가 원하는 정보를 쉽게 찾을 수 있고, 사용자 경험(UX)을 개선할 수 있답니다.
- 대분류: 민원신청, 정부서비스, 정책정보, 고객센터
- 중분류: 전입신고, 주민등록등본(초본) 발급, 건강보험료 조회, 코로나19 예방접종 예약, 정부보조금 안내, 경제정책 정보, 교육정책 정보, 생활정보
- 소분류: 전입신고 신청, 주민등록등본(초본) 발급 신청, 건강보험료 조회 신청, 코로나19 예방접종 예약 신청, 정부보조금 신청, 경제정책 정보 검색, 교육정책 정보 검색, 생활정보 검색
IA 설계전 마인드탭 작성
알마인드맵, 씽크와이즈, 프리 마안드 등의 도구를 활용하여 전체 흐름을 잡을 수 있습니다. 마인드맵은 정보를 시각적으로 표현하여 전반적인 구조와 흐름을 만들어, 생각의 흐름을 정리할 수 있다는 장점이 있습니다.
○ IA (Information Architecture) 작성하는 법
IA는 위에서 설명한 것처럼, 메뉴의 정보 구조를 설계하고 정의하는 문서입니다. 각 화면의 연계성과 접근성을 기준을 정하여 분류해서 웹 페이지를 파악하기 용이하게 합니다. 잠깐 위 테이블에 나온 용어 중에 Depth가 있는데, 이는 길이를 의미합니다.
| No. | 1Depth | 2Depth | 3Depth | 4Depth | 5Depth | Type | Contents | Description | UX / UI 기획 (컨펌 단계) | Due Date | Design | Due date | Coding | Due date | 화면ID | 구현방식 | 연계방식 | 연계사이트 | 사이트메뉴 |
| Home | |||||||||||||||||||
| 기업 소개 | 인사말 | ||||||||||||||||||
| 설립목적 | |||||||||||||||||||
| 경영 철학(사명, 비전,핵심가치) | |||||||||||||||||||
| 조직 및 연락처 | |||||||||||||||||||
| 찾아오시는 길 | |||||||||||||||||||
| 사업소개 | 사업소개1 | ||||||||||||||||||
| 사업소개2 | |||||||||||||||||||
| 사업소개3 |
정보구조도와 비교하여 유사하지만 차이가 있는 개념인 메뉴구조도와 화면목록을 알아보도록 할게요.
- 정보구조도(IA): 웹이나 앱의 화면과 메뉴의 정보 구조를 설계하고 정의하는 문서입니다. 사용자가 필요한 화면의 흐름을 시각화하여 나타냅니다
- 메뉴구조도: 전체 메뉴 및 서비스의 구조를 시각화한 문서로, IA보다 간결하게 서비스 구조를 파악할 수 있습니다.
- 화면목록: 서비스의 모든 화면을 리스트로 정리한 문서로, 각 화면의 대략적 경로와 ID만을 기재하여 작업의 가독성을 높입니다.
제 블로그를 찾아주셔서 감사합니다. 돈남우형님은 소상공인에게 도움이 되는 생생한 정보를 포스팅합니다. 블로그를 방문해 주시는 모든 분들에게 돈과 행운, 무엇보다 행복이 삶 속에서 넘쳐나길 기원합니다! ^_^
댓글