brunch

You can make anything
by writing

C.S.Lewis

by 연두씨 Jun 10. 2022

IA 작성하기

안녕하세요. 연두씨입니다.

처음 서비스를 분석할 때 혹은 신규로 만들 서비스의 구조를 정리할 때.. IA를 작성하게 됩니다.

오늘은 그 IA에 대해 알아보려고 합니다.


우선! IA가 무엇인가... 하면,

한글(?)로 쓰면 인포메이션 아키텍처인데요. 번역하면 정보구조입니다.

웹사이트의 구조를 정리하고, 그 구조 속에 어떤 정보가 들어가 있는지 표로 정리하는 문서입니다.


왜?? 이 문서를 작성하는가... 하면,

한눈에 웹사이트의 정보를 알기 위함입니다.

생각해 보세요. 많은 페이지로 이뤄져 있는 웹사이트를 구조적으로 나누어 정보를 표현한다면 이 사이트를 이해하는데 얼마나 큰 도움이 되겠어요. 표로 한 판에 정리가 되어 있는데.

이 말을 반대로 말하면, IA는 이 사이트를 이해하기 쉽도록 표로 한 판에 잘 정리가 되어 있어야 한다는 뜻입니다.


작성할 때 가장 중요한 것은,

기준과 규칙입니다.

이렇게 작성해야만 맞다는 절대적인 법은 없어요. 각 사이트의 형편에 맞게, 본인 스타일대로 정리하면 되는데...

다만, 한 문서 내의 기준과 규칙은 명확해야 합니다.


예를 들면,

메인과 섹션 메인의 형태를 모두 메인이라는 타입으로 정리할 수도 있고

메인은 전체 메인, 섹션 메인은 섹션 메인으로 정리할 수도 있습니다.

그러나 메인과 몇 개의 섹션 메인은 메인으로, 또 다른 몇 개는 섹션 메인으로 정리하면 혼란이 올 수 있어요.

한 문서 내의 기준과 규칙은 나름의 논리를 명확히 해야 합니다.  


하나 더 예를 들면,

홈을 0depth로 해도, 1depth로 해도 상관없습니다.

홈이 0이냐, 1이냐가 중요한 게 아니라 홈과 다른 페이지 사이의 구조가 명확한 기준에 의해 정리되어 있는지입니다.


다시 한번 말하지만, 가장 중요한 것은!!

구조를 나누고 정보를 기재하는 기준이 명확해야 하고, 일정한 규칙에 의해 정리되어야 한다는 것입니다.

기준과 규칙이 명확해야 구조를 쉽게 이해하고 예측할 수 있으며, 목표인 사이트를 한눈에 파악할 수 있게 됩니다.



실제로 작성하는 방법은 보통 아래와 같은 표 형태로 작성합니다.

사이트 구조를 depth로 표현하고 각 depth의 페이 지명, 속성, 추가 설명 등을 같이 정리합니다.


실제로 이런 사이트는 없어요. 제가 임의로 작성한 건데요.

제가 작성한 기준과 규칙들을 설명해 보겠습니다.


1) 최상단에는 항상 제목을 씁니다. IA뿐 아니라 모든 문서의 기본.

2) 버전/작성일/작성자를 씁니다. 나중에 이 문서를 누가 봐도 언제 누가 썼는지 파악하기 위함입니다.

3) No.를 두면 전체적으로 작업되어야 할 html 본수를 확인할 수 있습니다. 작업해야 할 페이지를 하나도 안 빼고 성실히 잘 쓴다면..


4) Depth의 역할은 각 페이지간의 관계 또는 위치를 설명해 줍니다. 지금 구조로 보면 홈에서 각 상품 리스트, 프로모션, 공지사항, 로그인 그리고 상품 상세로 갈 수 있지만 상품 상세와 리스트는 같은 레벨의 페이지는 아닙니다.

하이라키 구조로 본다면 리스트보다 하위의 페이지이고, 다시 말하면 리스트와 상-하위 관계 에요.


5) type는 각 페이지의 성격을 표현한 내용입니다. 홈과 마이페이지는 메인이라는 타입으로 적었고, 각 메뉴는 상품리 스트라는 타입으로 정리했습니다. 저는 이걸 설명할 때, 메인은 하위 메뉴의 일부 정보를 대시보드 형태로 보여주는 타입이라고 하고, 상품 리스트는 각 카테고리의 상품의 리스트 페이지인데, 메인타입은 하위 정보에 따라 구성 내용이 다르고, 상품 리스트는 카테고리명만 다를 뿐 리스트 구조는 같은 형태라고 할 거예요.

이렇게 메인과 상품 리스트의 성격을 정의해 두면, 메인 형태가 또 추가돼도 상품 리스트가 또 추가돼도 작업 하는 사람들이 예측할 수 있게 되겠지요. 그 기준대로 작업하면 사용하는 사람들도 규칙에 의해 정리된 UI로 사용할 수 있고.


6) contents는 해당 페이지에 들어갈 내용을 간략히 적어 두고

7) description은 해당 페이지에 추가로 설명이 필요한 부분을 정리 하였습니다.


위의 구조를 바탕으로 홈 화면을 그리면 대략 아래와 같인 그림이 될 것 같습니다.


혹은, 꺼꾸로 화면을 보고 엑셀로 위와 같이 구조를 정리해 둘 수도 있겠습니다.



여러번 강조하였지만, 중요한 건 정해진 기준과 규칙대로 정리 하는 것인데 이게 익숙해지지 않으면 생각보다 쉽지 않습니다.

depth가 클릭 기준인가, 페이지 기준인가 헷갈리고

카테고리명만 바뀌고 타입은 똑같으면 각 카테고리별 리스트를 다 써야 하나 리스트 하나만 써야 하나

스스로 확신이 안 설 때가 있어요.


여러번 작성하다보면 점점 로직컬하게 정리하는게 좀 더 수월해지게 됩니다.

뭐든 그렇지만 여러번 해보면서 익숙해 지고 자기만의 노하우가 생기게 됩니다.


저는 뭐...굳이 연습까지 할 필요가 있겠나..싶고, 그저 분석이 필요할 때 마다 열심히 하다보면 좀 더 수월하게 될 거라고 생각하는데요.

그래도 빨리 능숙해 지기 위해 연습 하신다고 하면, 메뉴가 적은 사이트나, 서비스 기준으로 이미 만들어진 사이트를 보고 작성해 보다보면 좋을 것 같습니다.


적은 메뉴라하면 메일이나 메세지... 카톡이라고 쓸라 했는데, 카톡도 요새는 메뉴가 많네요. 암튼, 메뉴가 간단한 것부터 정리하면서 구조를 파악하시고 점차 복잡한 구조와 메뉴가 있는 사이트도 분석해 보시면 도움이 될 것 같습니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari