[내일배움캠프] TIL 3주차

👩‍💻 해당글은 내일배움 사전캠프 작성글입니다. 

 

아티클 출처 : https://story.pxd.co.kr/1600

 

목차

• 핵심내용 정리
• 인사이트
• 알게된점

---

 

핵심내용 정리

IA란?

IA = Information Architecture → 서비스의 전체 구조를 지탱하는 뼈대

IA는 서비스 전체를 이루는 정보가 사용자에게 효과적으로 전달될 수 있도록 설계되고, 설계된 정보를 시각화한 UI를 통해 사용자에게 전달한다. (IA → 인터페이스 → 사용자)

IA ≠ Navigation → 밀접한 연관과 공통점이 있지만, IA는 Navigation과 같이 UI의 일부가 아니라, UI룰 구성하기 위한 바탕이기 때문에 서로 다른 접근법이 필요함.

 

설계방법

IA 서비스를 ‘전체’를 아우르기 때문에 UI요소 이외에도 서비스와 연결된 사람, 상황 등을 고려해야 한다.

 

외부요소 : IA의 방향성 찾기

[사용자]
서비스를 찾은 목적 : 서비스에서 어떻게 사용자의 목적을 달성하게 할지
태스크의 종류 : 목적을 달성하기 위해 어떤 태스크가 필요한지
기능의 난이도 : 태스크를 구성하는 여러 가지의 기능을 타깃 사용자가 쉽게 쓸 수 있는지

[컨텐츠]
컨텐츠의 개체 : 개별의 컨텐츠가 어떤 정보를 담고 있는지
정보의 크기 : 컨텐츠가 가진 정보가 하나의 페이지로 이루어져이루어져야 할지, 화면 내 일부 영역으로 제공될 수 있을지
기존 구조 : 운영되고 있는 서비스의 경우 컨텐츠가 현재 어느 위치에 어떤 역할로 제공되고 있는지, 이러한 구성이 정말로 적합한지

서비스에서 제공할 컨텐츠를 자세히 학습해 보는 과정이 필요.

만약 운영되고 있는 서비스를 개선하는 과정이라면 기존 IA를 충분히 학습하는 것이 중요. → 구성을 잘 이해하지 못할 경우, 결정을 하는 데 있어서 큰 위험이 따를 수 있기 때문

[맥락]
비즈니스 목표 : 회사가 앞으로 나아갈 방향이 무엇이고 서비스를 통해 이를 어떻게 달성할 수 있을지 정책 : 서비스를 운영하는 규칙이 어떤 것이 있는지, 꼭 지켜야 할 것은 무엇인지, 개선 할 수 있는 것은 무엇인지 기술, 자금 규모, 인력구조 : 계속해서 서비스를 운영하기 위해 적합한 방식이 무엇인지

서비스 운영자 입장에서 이해가 필요. → ex) ’이 정책이 적합한가?’ ‘이 기능은 지금 없는데, 새로 만들어도 괜찮을까?’..
이런 과정이 필요하지만 재밌고 새로운 생각을 제한하지 않도록 적절한 균형을 맞추는 것이 중요.

 

내부요소 : IA 구체화하기

 

1. 구조화하는 방법 (Orgnal System)

외부요소에서 얻은 정보를 토대로 구체화를 시작하는 단계 → 서비스에 적합한 정보 분류기준을 찾고, 공동규칙을 만드는 과정이 필요.

 

ex) '초기 디즈니랜드의 구조'

 

분류기준 찾기

디즈니 랜드가 보유한 테마를 가장 잘 나타낼 수 있는 기준으로 나눔. 서비스의 특징에 따라 사용자 여정, 서비스 방문 목적, 상품의 카테고리 다양한 분류 기준 시도

 

공통적 규칙 만들기

정해진 기준에 맞춰 하나하나의 정보를 분류에 맞게 배열하는 과정을 거친다.

무조건 동일한 규칙을 적용해서 정보를 구성해야 하는 것은 아님 다만 IA 전체를 아우르는 공통규칙을 적용하면, 사용자가 정보를 빠르게 학습할 수 있고 찾고자 하는 정보의 위치를 예측해서 쉬게 찾아가는 것을 기대할 수 있다.

나아가 서비스의 컨텐츠가 확장될 경우에도 전체 구조를 일관되게 유지할 수 있도록 함.

 

정보 연결하기

위에서 정보와 규칙을 그룹화 했다면 이 그룹들을 연결해서 전체 구조를 만든다.

디즈니랜드처럼 플랫폼의 종류, 제공하는 기능, 전략 등에 맞는 정보의 구조를 선택해야 합니다.

 

2. 이동하는 방법 (Navigation System)

정보와 정보 사이를 이동하는 방법 이때 중요한 점은 현재 위치와 가야 할 방행성이 어딘지 사용자가 쉽게 알 수 있도록 만들어야 한다. 중심이 되는 이동 방식을 정하고 이를 나타내는 내비게이션 컴포넌트를 선택해서 화면에 시각화한다.

Navigation System에서 제공할 수 있는 대표적인 이동 방식 → Reverse Navigation 동일한 위계의 다양한 컨텐츠에 접근하게 하려면 Lateral Navigation을, 플로우에 집중하게 하려면 Foward Navition을 주요한 이동방식으로 선택할 수 있다.

(* 참고 : https://m2.material.io/design/navigation/understanding-navigation.html#types-of-navigation)

 

3. 정보를 찾는 방법 (Searching System)

검색은 Forward Navigation 하위 뎁스에 있는 정보까지 쉽게 도달할 수 있는 방법. 사용자가 일일이 탐색하지 않아도 되는 장점이 있지만, 모든 서비스에 필수 요소는 아님 전달해야 하는 정보의 양이 많거나, 다양할 경우 검색이 효과적으로 사용될 수 있음.

정보를 찾는 방법을 만들기 위해서는 검색의 범위를 설정 해야 한다. → Seraching System은 단순히키워드를 입력해서 정보를 찾게 하는 것 이외에 필터나 정보에 빠르게 도달할 수 있게 만드는 다양한 기능들을 함께 생각해 볼 수 있다.

 

4. 이름 붙이는 방법 (Label System)

정보가 사용자에게 전달되기 위해서는 이해하기 쉬운 이름이 필요. 서비스의 UX Writing과 함께 고민을 하기도 함. 서비스가 가진 메시지를 단어나 톤으로 전달할 수 있기 때문.

정보의 이름을 붙일 때 어려운 단어를 사용자 중심으로 전환하는 것도 중요하지만, 정보가 가진 의미를 잘 전달할 수 있는지 확인해야 한다. 비슷한 서비스에서 통상 적으로 사용되는 고유명칭을 무작정 쉬운 이름으로 바꿨을 때 오히려 혼란이 생길 수도 있기 때문이다.

 

---

인사이트

1. (좋았던 점) IA와 Navition 다르다는것의 논리를 이해 할 수 있게되면서 전체를 하나에만이 아니라 전체를 파악해야하는 중요함을 느꼈다.

2. (좋았던점) 다른 아티클의 경우 보통 앱을 예시로 설명을 하는 경우가 많지만, ‘장소’라는 공간을 예시로 들어 IA라는 것이 꼭 오프라인에만 국한된 것이 아니라는 것을 느꼈다.

3. (아쉬운 점) 정보의 양이 방대하다는것을 이해하지만, 아티클의 길이가 너무 길어서 앞에 읽었던 정보를 다시 찾아봐야 하는 경우가 생겼다.

4. (아쉬운점) 비전공자가 읽기에는 조금 어렵지 않을까 하는 생각이 들었다.

 

 

알게 된 개념

1. IA = Information Architecture : 서비스의 전체 구조를 지탱하는 뼈대

2. IA ≠ Navigation 비슷하지만 IA는 좀 더 넓은 이해요소를 가지는 것으로 이해

3. Forward Navigation : 상위하면 (계층의 상위 수준)에서 하위 화면 (하위 수준) 더 깊은 콘텐츠에 액세스 하기 위해 입 계층 구조에서 아래쪽으로 순차적 흐름의 계층구조 (* 참고 : https://m2.material.io/design/navigation/understanding-navigation.html#forward-navigation)

4. Task : 작업 단위의 실행 단위, 프로세스 (* 출처 : https://ko.wikipedia.org/wiki/태스크)