IA. 잘 모르지만 일단 그냥 해봅니다
모르는 것. 미지의 것
갑자기 뜬금없는 X소리로 들릴 수 있겠지만 1927년으로 거슬러 가 당시 공포 소설의 아버지라 불리는 H.P. 러브크래프트의 이 말이 문득 떠올랐다. 이번 글은 그의 문장을 다시 적어 보며 시작해본다.
"인간의 가장 오래되고 강력한 감정은 두려움이다.
그리고 가장 오래되고 강력한 두려움은 미지의 것에 대한 두려움이다."
맞다. '미지의 것'. 인간을 불안하고 두렵게 만드는 원인 중 단언컨대 그것만 한 것이 없겠다. 오죽하면 숱한 과학자들이 우리 인간이 경험하는 모든 근본적 불안 혹은 두려움의 원인은 바로 이런 '미지'와 '불확실함'이라 했으니. 결국 우리 인간들에게 있어서 외부적 내적 '불확실성'을 얼마나 잘 견디고 대처하는지 야말로 인생이라는 '대항해'를 건넘에 있어서 상당히 중요하게 느껴진다. (근데 웬 뚱딴지?)
그리고 지금. 나는 IA라는 미지의 것과 만났다. (이 이야기하려고 서론이 좀 지루하게 길어졌다) 사실 IA 뿐이겠는가. 디자인 섬에 도착한 현재. 사실 '미지의 것' 들과 매일 수차례 목도하는 중이다. 프로세스와 용어는 기본, 이 업계에서 오래 흘러왔다던 디자이너들이나 기획자들 나름의 '원칙' 혹은 '행동강령'으로 보이는 것들까지 전부 다. 혼자 (디립다 파듯) 공부하며 이해한 걸 간단히 연습 삼아 이렇게 피그마라는 툴을 이용해서 만들어보기도 하며 (아래) 천천히 랜딩(?) 중인데 이게 맞는 방향인지는 여전히 잘 모르겠다. 그래서 오늘도 남겨보는 일(work) 기.
피그마 연습용 머릿속 지식 정리... 정리를 하든 만들든, 스스로 제대로 알아야 한다. 그래야 설명도 가능한 것. IA, 너는 누구세요
이 업계에서 '기획'이나 '디자인'을 한다는 그 행위들이 도대체 어느 순서에 있고 (때로 규칙 파괴가 될 수 있을지언정) 그것을 행함에 무엇을 하는지. 어느 단계에서 어떤 산출물들이 만들어지는지. 각 파트들의 what과 how 가 도무지 궁금했다. 사실 위의 도식도를 그리면서도 혼자 속으로 궁시렁댔었다. 색감도 모양새도 영 구려서 도통 마음에 들진 않지만 한편 혼자 이해하자고 만든 건데 데코레이션이 뭐 그리 중요한가 싶기도 하면서. 여튼 조금씩 이해를 '하고 있다'라는 성장 진행형이라는 과정에 의의를 두는 것으로 (이렇게 또 합리화는 정말 잘한다...역시 인간은 인지부조화와 확증편향적임;;) 아직도 가야 할 길이 첩첩산중이지만 아무튼 이해하자면 저 위의 행위들을 토대로 무언가 '뿅' 하고 탄생하는 것으로 이해되는데, 그중 IA라는 것은 '기획' 단에 속하는 앞 단의 큰 그림. 기본. 밑그림. 외국에서는 이를 '와이어프레임' 이라고도 부른다.
Information Architecture의 약어인 IA. 그것은 우리가 만들어 낸/낼 서비스의 전체 구조와 같은 '뼈대' 역할을 한다. 우리 몸도 우선 뼈가 있어야 그 위에 살이 덕지덕지 붙어서 몸을 이룬다. (너무 많이 붙으면 안 된다. 뚱뚱 치킨으로 살면 인생이 좀 고달프다 여러모로) 이해하자면 IA는 결국 서비스 안에 담긴 정보(컨텐츠)가 그것과 닿은 사람 (사용자, 잠재고객 포함) 에게 보다 용이하고 효과적으로 전달되기까지의 디자인물로 탄생되기 전, 밑바탕이 되어 주는 걸 말한다. 초반에 설계된 정보구조들을 바탕으로 디자인이라는 심미적인 시각화를 통해 사람들에게 전달될테니. 좀 크게 생각해보면 세상에 뭐든 '디자인' 이 빠진 게 없고 기술이 심화될 수록 점점 디자인은 그 범위가 확장되고 중요하게 떠오르는 것이 아닌가 싶기도 한.
정보가 사람들에게 전달되기까지의 효과적인 골조. 설계를 구상하는 단계랄까....정답 없는 IA. 구체적으로 뭘 해야 하나
답 없는 세계에서 나는 마치 무언의 답을 바라듯, IA 관련된 아티클들을 죄다가 읽어보다 그냥 한 단어로 정의할 수 있지 않은가 싶은 생각을 했다. '설계' 하기. 집 공사로 따지자면 뼈대 세우며 큰 그림을 그려 나가는 골조 공사랄까. 사용자에게 전달되려는 정보(서비스)를 '구성' 하는 것. 그렇게 밑그림 그리듯 설계를 하고 거기에 중심 이름들을 부여하고 (UX 라이팅, 레이블링) 만들려는 (혹은 뜯어고치려는) 서비스의 대표성 (브랜드, 콘셉트, 기타 디자인 정체성 등)에 맞게 부합시켜 뒷단 (스토리보드 혹은 상세 기능서)에서 기능이나 리스트, 메뉴와 같은 '체계'를 잡는 '기준' 이 되는 것. IA는 결국 사용자로 하여금 그 서비스를 사용하는데 '방향'을 제시하는 데 필요한 단계. 사용자가 방문한 이상 좋은 정보 (콘텐츠)와 만날 수 있도록 '발견'하는 기쁨을 주는 첫 시도....
Organizatin
Labeling
Navigation
Searching
예를 들어 기초 웹페이지 만들기의 실무로 따지자면 사용자에게 보이는 메인 화면을 기준으로 상/하단 GNB와 헤더 (Header) 혹은 푸터 (Footer)는 어찌할지. 퀵 메뉴는 어떻게 가지고 갈지. 혹은 각 페이지 별 계층 구조나 종속 관계는 어떤 식으로 배치할지를 생각할 것이다. 그리고 상세 page 별 depth를 구성하고 좀 더 깊숙하게는 각 depth 별 시나리오를 만들고 사용자 행위를 궁리하며 각 description을 기획하고 정의하는 것.... 뭐 이런 순서랄까.
IA. 뭔지 몰라도 그냥 일단 파헤쳤다;
간단히 웹사이트를 기준으로 주로 좋아하거나 눈여겨보는 10개 정도의 기존 서비스들을 우선 정했다. 교보문고, 예스 24, 브런치, 카카오 뱅크, 토스, 스타벅스, 투썸플레이스, 뚜레쥬르, 파리바게트, 배민 문방구, 우아한 형제들 등. 그들의 웹페이지를 간단히 연습(?) 삼아 어떤 IA를 지니고 있는지 파헤쳐보는 걸로 맨땅에 헤딩~ (역시 구르고 게기면서 익히는 게 최고지 싶은 이 무식함...)
헤쳐보니 각 서비스 사이트들의 정체성에 따라서 역시 보여주는 것들도 천차만별이더라. 디자인적으로도 구조적으로도 심플함과 복잡도, 그리고 각 서비스들만의 특징이 보이는 것도 같았다. 예를 들어 구매 기능이 있는 예스 24나 교보는 역시나 좀 depth 가 많은 복잡도(?)가 느껴지고 (내 눈에 좀 조잡해 보이기도 하고) 반면 배민 문방구도 구매하기 기능이 있긴 한데 어딘지 모르게 '초심플 단순 간결' 하다는 느낌을 받기도 하고. 뚜레쥬르 다르고 파리바게트 다르고 (사실 빵맛은 비슷한데 아무튼 보이는 게 참 또 다른 건 또 다르고) 카뱅이나 토스도 전통적인 금융 홈페이지와는 달리 역시 쌈박하고 기깔난(!) 화면들과 사용하기도 편리한 디자인 배치/텍스트들 덕분에 친절함을 느끼게 되고.... (사적 느낌일 수 있으나) 무엇보다 애정 하는 브런치는 솔직히 IA 가 있다는 느낌보다 블로그스러운 사이트이고 (물론 글쓰기에 최적화된) 작가별 페이지와 독자 별 페이지에 따라 유저 사용성이 좀 달리 가는 페이지라는 느낌이고...
지극히 사적인 썰)
엑셀을 펼치고 정리 강박 있는 인간이라 나름 셀 너비 맞추고 자동 줄 바꿈, 틀 고정시켜 두고...
- Depth 1 / 2/ 3/ 4.....
- 보이는 기능 (페이지) 죄다가 list up
- 보이는 각 페이지들이 어느 하이라키에 있는지.... 뚫어지게 쳐다보고 손가락 휘날리기
- 반복 또 반복
- 텍스트 막일과 복붙의 감사 (손타자가 빠르면 그냥 두드리는 게 훨씬 낫다;)
- 상세 기능 정의는 IA 가 아니라 그 뒷단인 스토리보드나 기능 설계서에서 하는 것으로..
- IA는 펼쳐 놓은 table 만 보고도 대충 아 이런 웹/앱이 이런 순서로 어떤 내용이 들어가는구나라고 처음 보는 사람도 '상상' 할 수 있게끔....(이라고 말은 쉬운데; )
분류하고 규칙 정해서 정보들 연결하기
답은 없지만 위의 서비스들이 '나' 같은 사용자들에게 어떤 형태로 '나는 이러해요'라는 걸 보여주려는 지 그 중심 '구조'를 설계하는 게 IA의 핵심이라는 생각이 든다. 다시 말하자면 기업이 (클라이언트가 혹은 사업자가) 말하는/말하고 싶은 서비스를 어떻게 '잘' 설계해서 보여줄 건지, 그리고 분류된 것들의 상세 기능들을 각 페이지들 안에서 어떤 규칙들을 가지고 배열시키고 명명하며 유도할 것인지 (어떤 공통 규칙 하에 개별 정보-콘텐츠- 들이 담겨 있는지) 살펴보는 시간.
사실 처음엔 뭐가 뭔지 모르겠고 여전히 이게 맞게 이해하는지도 모르겠지만 일단 구조들을 파악하고 그 구조 안에서 어떤 규칙들로 콘텐츠가 배치되어 있는지에 대해서 살펴보니 아주 조금은 IA에 대해서 이해하게 된 것 같은 기분이다. 물론 백문이 불여일견. 뭐든 좀 해 봐야 알게 되는 것 같아서 틈틈이 파헤치는 연습을 좀 해보며, 이것은 마치 글쓰기와 같다고나 할까. 쓰다 보니 알게 되고 또 나름의 문체나 필력도 성장하는 것처럼...
IA 도 해체하면서 연습(?)을 해 보니 큰 그림부터 구조를 파악하는 것이라든지 각 페이지 구조들이 어떻게 설계되어 있고 어떤 구성들이 좀 더 user friendly 하고 심미적으로도 안정적이고 아름답게 보일 수 있는지에 대한 '고민' 이 얼마큼 담겨 있는지. IA를 역으로 헤쳐보니 새삼 느껴지는 것들이 있다. '기본' 이 정말 중요한 모든 '기본'이라는 것. 사소하고 대수롭지 않게 보여도 기본이 탄탄하게 작업이 돼야 그 이후 심화 버전(?) 들도 각 상세 스토리보드 속에서 각 컴포넌트별로 잘 description 되는 것 같다는....(라는 문장을 쓸 수 있게 된 걸 보니, 여태 공부 괜히 한 건 아니지 싶다.;;)
그렇지만 건물주도 공부 안 하면 새 건물에 먹힌다는 것 ;; 공부는 평생 해야 하느니.....미지의 것은 불안하다. 그러나 알고 나면 별 게 아니다.
별 게 아닐 수 있는 건 그만큼 해 봤다는 것일지도 모른다. 나로서는 여전히 어색한 것 투성이고 '별 것' 이 대부분인 나날이지만 한편 익숙하지 않은 것이어서 기쁘기도 하다. 새롭게 배우는 게 있고 거기에서 묘한 흥미까지 느끼니까. 여전히 갈 길이 첩첩산중이지만 우선 지식의 한계에 부딪혀 빠르게 침잠하진 말자는 각오로. 글을 쓰다가 문득 다음엔 머릿속에 둥둥 떠다니는 이놈의 업계 용어들을 정리해 보는 것으로 정해 본다.. (스페이스 홀더. 콤보 박스. 드롭다운. 라디오 버튼. 아코디언. 모달. 딤처리. 햄버거 메뉴...응? 햄버거는 먹는 게 아니었네!! ㅋㅋ)
언제나 그러했듯 심각할 것 없이. 차근차근히. 오늘의 일(work) 기. 끝-
애 키우며 공부하고 일 따라잡는 게 쉽지 않지만ㅋㅋ 육아보다 쉽다는 건 비밀- (육아는 늘 고난도... 하.......)참고) 여기저기의 숱한 web과 아래 주요
https://pansysiyujia.medium.com/reading-notes-of-information-architecture-part-ii-e0d47ac1ea9
https://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/
