웹에이전시에서 쓰는 기획용어 총정리 1편 (I.A)
저는 4년간 IT 에이전시에 있으면서 그동안에 쌓여있던 노하우를 풀기위해 브런치를 시작했는데요. 이전글에서는 제가 프로젝트를 진행하면서 겪었던 인사이트에 대해 주로 설명드렸던 것 같습니다.
그러다 보니 기획을 처음 하는 초보기획자, 기린이(?) 들은 아마 제 글이 정말 크게 와닿지는 못할 수도 있다고 생각이 들었습니다
백문이 불여일견이라 직접 기획을 하다가 문제들이 발생하게 되면 그때 제 이야기들이 더 와닿을 순 있겠지만, 이제 기획을 처음 시작하는 사람의 입장에선 아직은 먼 이야기일 뿐이라고 생각이 들수 밖에 없을 것입니다.
그래서 이번 시간에는 정말 기초적인 개념인 기획용어와 기획 문서는 어떻게하면 잘 쓸 수 있는지에 대한 내용들을 설명드리고자 합니다.
아마 기획을 처음 하다보면 기획책 혹은 티스토리등의 블로그를 통해 기획에 대한 개념을 정립할 것입니다.
하지만 이런경험은 있지 않으셨나요? 각 블로그마다 용어를 정의하는게 다르고 문서도 정말 각기 달라 어떤 문서가 내 상황에 맞는 문서지? 라고 의문이 드셨을 것입니다.
기획문서라고 하면 결국 각 기업별로 추구하는 방향과 상황이 각각 다르기 때문에, 다를 수밖에 없다는 점을 먼저 인지하시면 됩니다.
우리가 커피를 사 마실 때도, 각 프랜차이즈별로 쓰는 원두, 물의 양이 다르듯이 각 업체별로 쓰는 기획문서 또한 다를 수도 있다고 생각하시면 됩니다.
이후에 다음과 같은 생각을 통해 여러분만의 기획문서를 만들어나가시면 됩니다.
" 내가 기획문서를 만들 때 가장 중요한 것은 무엇일까? / 어떤 것을 담아내야 내 상황에 아주 적절한 기획문서를 만들 수 있을까? "
이러한 사고과정 또한 4년차 에이전시 기획자는 어떤식으로 진행했는지 등을 이번 글을 통해 설명드리고자 합니다.
기획에 대해 어느정도 아는사람이라면 다른 에이전시에서는 이런 방식으로 기획 용어를 사용하는구나, 기획 문서는 이렇게도 쓸 수 있구나라고 생각하면서 봐주시면 감사하겠습니다.
그러면 웹에이전시에서 쓰는 기획용어 총정리 시작하도록 하겠습니다.
웹에이전시에서 쓰는 기획용어 총정리 1편 (I.A)
이번 글에서는 I.A에 대한 용어 정리와 어떤식으로 문서를 작성하는지에 대해 설명드리고자 합니다.
먼저 I.A에 대한 개념을 설명드리자면 다음과 같습니다
I.A : Information Architecture로 정보구조도라는 굉장히 형식적인 뜻을 지니고 있습니다.
이를 쉽게 표현하면 I.A란, 홈페이지가 어떤 페이지들로 연결되어있는지 보여주는 설계도입니다.
이는 웹사이트 뿐만아니라 APP 즉, 휴대폰에서 사용하는 어플리케이션에서도 적용되는 개념입니다.
예를 들어, 카카오톡의 쇼핑페이지 I.A를 대략적으로 짜면 다음과 같을 것입니다.
[로그인을 했다는 가정]
탑네비 : 마이 페이지 - 설정 페이지
메인화면 : 선물하기 - 쇼핑하기 - 메이커스 - 라이브쇼핑 - 프렌즈 - MY쇼핑
바텀네비 : 스플래쉬 이미지 - 친구목록 페이지 - 채팅목록 페이지 - 오픈채팅 페이지 - 쇼핑 페이지 - 더보기 페이지
탑네비 : Top navigation이라는 뜻으로 가장 위에 달려있는 메뉴바를 의미합니다
바텀네비 : Bottom navigation이라는 뜻으로 가장 아래에 달려있는 메뉴바를 의미합니다.
각 페이지마다 상세페이지는 존재하겠지만 대략적인 메뉴 구성은 다음과 같습니다. 제가 설명드린 내용을 확인했을 때, 아마 IT에 대한 감각이 있으신 분들은 어느정도 느낌이 오실 것입니다.
즉 I.A는 메뉴버튼을 통한 페이지 구성을 전부 표시한 설계도를 의미합니다.
실제로 에이전시의 하나의 홈페이지 I.A 사진을 보여드리면 다음과 같습니다.
홈페이지 I.A 예시각 홈페이지에서 들어갈 수 있는 메뉴바를 가장 상단에 표시하고 메뉴바 아래에 들어갈 수 있는 서브메뉴는 아래로 표시하는 것입니다.
아마 다른 업체에서는 I.A를 엑셀로 표시하는 경우도 많지만 엑셀의 경우 가독성이 조금 떨어지고 디자인 요소또한 전혀고려하지 못하기 때문에 저는 피그마라는 디자인 작업툴로 작업을 진행하곤 합니다.
제가 피그마를 사용하는 이유는 피그마를 통해 기획문서를 작업하면 훨씬더 클라이언트 입장에서 보기편하고 깔끔한 기획문서를 받을 수 있다고 판단했기 때문입니다.
다만, I.A를 엑셀시트로 따로 작업하는 경우도 존재하는데요. 바로 체계적인 대기업들과의 협업을 진행할 때에는 상부로 보고를 해야하기 때문에, 엑셀과 같은 형식적인 자료를 제공드리곤 합니다.
여기서 아까 제가 말씀드린 사고과정이 한번 거치게 된것입니다.
"내가 기획문서를 만들때 가장 중요한 것은 무엇일까?"
마냥 가독성과 디자인 요소만 고려했다면, 피그마로 작업한 기획문서만 제공하면 목표를 달성할 수 있을것입니다.
하지만 클라이언트의 상황, 성격에 맞춰서 대기업의 경우 보고절차가 굉장히 까다롭고 한번 보고가 된다면 며칠동안의 컨펌시간이 걸리기 때문에 한번 제공드릴때 형식적인 기획문서를 제공드려야 합니다.
그렇기 위해선 엑셀 시트를 통한 텍스트로 정갈된 기획문서가 필요하다고 판단했고, 엑셀시트와 같이 제공드리자 클라이언트 분들께서 굉장한 만족도를 표현해주셨습니다
다시 본론으로 돌아와 만약 내가 I.A를 만들어야한다고 했을 때 그러면 어떤 과정을 통해 완성해야할까?라는 주제를 가져보고자 합니다.
I.A에 대한 개념은 알았지만 처음 홈페이지를 만든다고 가정했을 때, 어떤식으로 메뉴들을 묶고 어떤식으로 표현해야 설계도가 되는지 감이 잘 안올 것입니다.
한번 다음과 같은 절차를 통해서 I.A를 만들어보시기 바랍니다.
1. 먼저 어떤 페이지가 필요한지 고민하기
홈페이지, APP은 집과 동일합니다. 인터넷상에서 집을 짓는거나 마찬가지입니다.
그렇기 위해선 당연하게도 어떤 방이 필요한지 그 방에서는 어떤 방으로 들어갈 수 있는지 등을 먼저 생각해야합니다.
만약 내가 회사소개 홈페이지를 기획한다고 하면 우리 회사소개 홈페이지에는 어떤 페이지들로 구성을 해야하는지 먼저 고민해야 합니다.
채용을 위한 페이지가 필요한지? 문의를 받는 페이지가 필요한지? 제품을 설명하는 페이지는 몇개 정도 필요한지등을 고민해야 합니다.
레퍼런스 홈페이지를 통해서 다른홈페이지는 홈페이지 안에서 이런 페이지도 있구나 등의 지식도 얻고 내부 실무자들과 많은 이야기들을 진행해야합니다.
그런 고민들을 처음부터 정리할 필요가 없습니다. 처음부터 깔끔하게 정리하려고 하니 어떻게 만들어야되는지 모르겠고 답답한 마음이 드는것입니다.
처음에는 종이에 내용들을 마구잡이로 써내려가 보는것입니다.
다음은 제가 무역거래 플랫폼을 기획하던 당시에 작업했던 노트인데요. 이런식으로 현 프로젝트에서 사용되는 개념들은 무엇이고 이를 표현하기 위해선 어떤 페이지가 있어야할까? 라는 내용들을 써내려가는 것입니다.
그런 것들을 이제 레고 조립하듯이 깔끔하게 표현하면 되는 것입니다. I.A를 만들다보면 정말 많은 고민들이 나올 것입니다.
이 페이지는 필요할까? 이 개념들은 어떻게 써야할까? 이 페이지는 있으면 좋을 것 같은데 넣는게 나을까? 등의 고민들이 계속해서 나올것입니다.
만약 클라이언트 프로젝트라면 이러한 고민들을 상의하고 정하는 과정을 위해 대면 혹은 비대면 미팅을 진행해야합니다.
또한 내부 프로젝트라면 실무자와 운영팀등의 실제로 프로젝트를 운영하는 팀원들과 소통을 통해 주어진 자원에 맞춰 홈페이지를 설정해야 합니다.
우리가 필요한 페이지가 무엇인지 다정했다면 이를 그룹핑하는것이 다음단계 입니다.
2. 같은 카테고리라고 생각하는 페이지들을 묶고 대표 카테고리명을 정하기
우리팀에서 필요한 페이지가 다음과 같이 나왔다고 가정해봅시다.
메인페이지 / 회사소개 페이지 / CEO인사말 / 회사연혁 / 기술소개 / 제품소개 / 오시는길 / 문의페이지
이렇게 제시되어있는 페이지를 하나의 카테고리로 묶을 수 있는 페이지들을 그룹핑해야하는데요. 왜 그룹핑해야할까요?
대부분 회사소개 홈페이지의 경우 각 페이지로 들어갈 수 있는 버튼을 보통 제일 위에있는 상단바에 표시해둘 것입니다.
홈페이지 예시 : 한화 공식홈페이지한화홈페이지의 경우 로고 | 한화소개 | 사업분야 | 미디어룸 | 지속가능경영 | 인재채용 | 한국어 | 검색등을 탑네비게이션에 표시하고 있습니다.
여기서 페이지로 들어가는 수많은 버튼들을 탑네비게이션에 전부 배치한다면 어떻게 될까요? 버튼이 너무 많아지게 되고 홈페이지 사용자입장에선 어떤 페이지로 들어가야 될지 혼돈이 오게 됩니다.
결국 홈페이지 사용자는 회사의 제품, 기술들을 보고 구매를 결정하는 잠재고객일텐데 혼란이 오는 홈페이지에 들어오게된다면 바로 이탈하게 될것입니다.
왜냐면 우리 홈페이지말고 경쟁업체도 존재하기 때문입니다. 홈페이지를 통해 불편한 경험을 제공한다면 우리 기술력이 아무리 좋다하더라도 절대 보지 않고 나갈 것입니다.
이런 이유들로 반드시 그룹핑을 통해 버튼을 간소화할 필요가 있으며, 이 과정을 거친다면 우리가 생각하던 I.A의 뼈대안을 만들 수 있을 것입니다.
그런 이후에는 탑네비에 배치되는 메뉴들을 1Depth 및 제일 상위에 배치하고 서브메뉴들을 2Depth, 3Depth에 배치하면 우리가 늘 보던 I.A가 완성되는 것입니다.
2Depth, 3Depth로 들어가는 페이지의 경우 각 페이지에서 들어갈 수 있는 페이지를 전부표시하면 됩니다.
다만 아래에 사항은 반드시 지켜주셔야 합니다.
1. 중복된 페이지는 표시하지 않는다.
2. 이전 페이지 경로는 표시하지 않는다.
1,2번을 고려하지 않는다면 꼬리에 꼬리를 무는 I.A가 나와 굉장히 혼란스러울 것입니다.
Ex) 메인 -> 회사소개 -> 메인 -> 인재채용
지금까지 웹에이전시에서 쓰는 기획용어, 문서인 I.A에 대해 설명드렸습니다.
다른 블로그글에서 볼수없는 내용들로 구성하기 위해 저의 인사이트 및 생각하는 과정까지 설명드렸는데요.
반드시 제가 가지고 있는 개념들을 이 글을 보고계신 분들 것으로 발전시켜 저보다 더 높은 퀄리티의 기획문서를 만드시길 바라겠습니다.
다음은 I.A에 이어 UX 플로우가 담긴 스토리보드에 대해 설명드리고자 합니다. 총 4편정도 기획하고 있으니 시간되시면 제글을 읽어주시면 절대 손해는 보지 않을 것입니다.
여러분의 3분시간을 정말 가치있게 보낼 수 있도록 고퀄리티의 정보를 담도록 노력하겠습니다.
긴 글 읽어주셔서 감사드리며, 더 좋은 정보로 찾아뵙도록 하겠습니다.
'오늘의 트렌드'
요즘은 20만원대 키링을 한정판매하는 것을 키켓팅을 하는것이 유행이라고 합니다. (키켓팅 : 키링 + 티켓팅)
