UI 브리핑 : 31화-정보의 핵심, ABC를 잡아라
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
오늘 진행할 이야기는, 난데없는 PPT? 에대한 부분입니다.
생각보다 많은 회사들이여전히 PPT 문서나. 프리젠테이션을 위한 제안서 등을 PPT 규격으로 제작하고있는게 현실이긴합니다. 물론 요즘은 프레지라던가. 별도 블로그나 웹사이트 등으로 이런 내용을 규격화하는 경우도 많고 아예 내부 보고나. 정리는 문서만으로 하는경우도 많아졌는데요. 특히나 이런 'PPT' 규격은 사라졌어도 PPT에서 진행하는 논리적 규격이나. 이야기전개방식은. 여전히 UI 디자이너들과 기획자들. 편집자들에게 중요한 개념입니다.
나중에따로 정보정리에대한 부분을 다루긴하겠지만 결국 모든 사이트들. 디자인들은 어떤 식으로건 정보를 전달하기위한 규격이고 그런 정보를 위해서 아주 간단한 마케팅 논리를 쓰고있죠.
A=B이다, 왜냐하면 C이기 때문이다.
https://brunch.co.kr/@clay1987/40
크게 B2B 사이트의 분류를 나누자면 서비스형 페이지와 정보성 페이지로 나뉘는데요. 이건 제가임의로 지정한 부분이니. 업계 평균이라기보다는 '아, 이렇게 나눌수도있구나'정도를 참고해주세요.
1) 서비스형 웹페이지 :
- 서비스의 구매와 실제 이용이 온라인을 통해 이뤄질 수 있다.
- 서비스 이용에 걸리는 시간이 짧고, 거래되는 금액의 규모가 상대적으로 작다.
2) 정보성 웹페이지
- 대부분 서비스의 판매를 직접적인 목표로 두지 않는다. 또한 서비스의 판매가 이뤄지더라도 그보다 정보전달 자체가 목적인 경우가 많다.
- 서비스의 구매와 실제 이용은 대부분 오프라인 상에서 대면하거나 / 담당자와의 상담 후에 이뤄진다.
- 서비스 이용에 걸리는 시간이 길고, 거래되는 금액의 규모가 상대적으로 크다.
기획자와 디자이너가 - 정보성 웹페이지 기획에 있어, 기본적으로 고민해야할 사항은 다음과 같습니다.
1) 회사가 전달해야하는 중요한 정보들은 어떤 것들이 있고, 얼마나 자주 만들어지는지.
2) 정보를 보러오는 대상은 일반인 / 투자자 / 구매자들 중 어떤 사람들인지.
3) 회사의 특색을 잘 드러낼 수 있는 디자인 규격과 스타일은 어떤 것인지
그리고 실제 이 부분을 기반으로 만들어진것이 웹사이트의 첫번째 페이지의 논리전개죠
https://www.emotion.co.kr/who-we-are/
플랫디자인의 도래이후에. 이른바 '단순한 디자인의 시대'에는. 사이트 디자인과 정보성 홈페이지의 규격조차도 간결하게 '필요한 정보만을' 배치시키는. 압도적인 미니멀리즘을 적용해 만들어지는 경우가 많습니다.
해당 이미지는 이모션. 거대 웹 에이전시이자 - 데이터 기반 디지털 마케팅을 진행하고있는 곳이죠. 디자인 회사지만 시각물은 거의없고. 오로지 텍스트로만. 정보로만 배치된 시안을 보실수있고. 거기에 중요한건 시각물의 완성도라기보다는. '논리구조'죠
http://www.plus-ex.com/#experience
물론 여전히 플러스엑스나 잘나가는 브랜딩 업체들은 갤러리 구조의 작업물 규격들을 '바로보여줍니다' 위에서 이야기한 A=B다. 왜냐하면 C이기 때문이다. '우리한테서 브랜딩을 진행해라. 우린 정말 쩔어주는 디자인을 하니까.' (A=B 왜? C니까) 를 그대로 디자인에 반영한 결과라고할수있습니다.
이런데 반해 위의 이모션 사이트의 경우는 - 우리에게 프로젝트를 맡겨라. 우린 체계적이고, 검증된 회사니까. (A=B 왜? C니까) 를 표기하기위해 전문가 인력구성풀. 디지털 마케팅인 옐로모바일. 그리고 20년간의 압축된 이력으로 모든걸 표현합니다.
사실 이런 규격들은 대부분 '압축된 제안서'규격입니다. 이후에 실제로우리가 얼마나 벌고. 인력구성이어떻고. 줄줄이 정보를 주면서 - 포폴 알려주고. 우리가 이렇게 뛰어나니 결국 - 우리랑 계약해!! 가 목적이죠. 항상 그렇지만 어느사이트건간에 원페이지레이아웃. 한 페이지내에서 해당 기업이나 사이트의 모든 가치를 보여주려하는 - IT 업계와 UI 설계의 변화를 이곳에서도 찾아보실수있습니다
http://www.masstige.biz/main/main.html
해당 사이트는 2018 i awards에서 대상받았던 사이트들 중에 하나인 기획중심의 에이전시들중 하나입니다. 사실 디자인적으로 그렇게 미려하거나하진 않은데요. 두괄식으로 '우리가 이렇게 쩔어. 그러니까 연락해'를 한번에 보여주려고 굉장히 고민한 흔적이 엿보입니다. 사실 사이트들중에서 이렇게까지 두괄식으로 -연락해.를 상단에놓는 경우도 찾기는힘든데. 되게특이한사례더군요.
그러니까 일반적인 사이트가. 이런 논리를 띠고있다면
1. 우리는 이런일을 해
2. 범위는 이정도까지고
3. 이런일들을 기존에했고
4. 잘해줄테니 연락해
매스티지란 사이트에서는
1. 야, 우리 쩌니까 연락해
2. 우리 이런일했고
3. 난 자신있어.
실제로 딱 이구조네요
해당 사이트 역시도 국내 대기업들 위주의 사이트들이 출품하는 i award 2018의 대상작중하나인 c side라는 업체의 웹사이트입니다.
위에서 이야기했듯이 논리를 정리해보면 다음과 같죠.
1. 우린 이런곳이야
2. 업무 범위는 이래
3. 기존엔 이런일했어
시각물의 완성도는 둘째치더라도. 결국 개별 페이지 하나하나가 논리전개의 순서이며 압축된 제안서 ppt입니다. 해당 업체의 강점을 그대로 드러내주는 장점 / 혹은 그들이 생각하는 논리적 강점들로 이뤄졌다는걸 알수있습니다. 다만 cside쪽 사이트를 저부분만 봐서는우리에게 프로젝트를 맡겨라. - 왜? 우린OO 하니까. (A=B 왜? C니까) 에대해 답을 제대로 못내리겠네요
실제로 디자인 규격은 아름다울지몰라도 세번째의 영상에서 모든걸 몰아서설명하려하다보니. 전달력이 많이 떨어집니다. 심지어 연락을 취할 UI도없고요. 그나마 믿고볼건 클라이언트들인거같네요.
이런식으로 정보만 한줌 추려내고나면. 개별 회사나. 서비스들. 사이트자체가 우리에게 서비스를 판매하려는 영업사원인셈이고 그들의 논리체계를 UI 구조에서 그대로 확인할수있습니다.
https://www.digitalworks.co.kr/dgMain.do
해당 사이트 역시 에이전시로 유명한 디지털웍스의 사이트입니다. 맨 상단에 영상을 두고 '우린 글로벌해'를 강조했네요. 글로벌을 강조하기위해서인지 co.kr 도메인임에도 불구하고 사이트의 대부분의 표기가 영어로되어있습니다.
그리고 메인잡을 디지털 컨설팅이라는 말로잡아뒀네요. 광고의영역과 사이트구축. 디지털 마케팅의 영역까지 모두포함하는듯합니다.
이걸 정리하면
1. 우리랑 계약해
2. 우린 글로벌 경험이 많고3
3. 여러 상품타입을 모두 성공적으로 진행해왔어. (A=B 왜? C니까)
라는 논리를 실제 차량에서부터. 화장품.스포츠영역까지. 글로벌이란 키워드 하나로 압축할수있겠네요
사실 이런 정보의 핵심정리는 포스터 규격에서 특히나 압축적으로 드러납니다. 여기서 OO 하니까 와! 이 행사는 끝내주니까. 같은 - 정보압축적 규격이자. 서비스 광고가 포스터거든요. UI 규격이나 설계라는것도 결국엔 광고의 측면에서보면. 약 3~4단계를 걸쳐서. 짧은 프리젠테이션을 고객들에게 선사하는 과정이란걸 알수있습니다.
http://www.yes24.com/Product/goods/43872408
제가 그런면에서 가장 추천할만한 책들 중 하나는 일본의 디자인 오피스 넨도의 사토 오오키가 쓴 채택되지않은 아이디어라는 책입니다. 해당 디자인 오피스 넨도는. 단순히 디자인 해결책을 내주는게아니라. 건축. 인테리어. 상품광고. 제품제작 . 마케팅까지 전체를 모두 다루는 일본의 전문 컨설팅 업체입니다.
실제로 제가 브랜딩.이라는 부분에서만 국한되어서 디자인을 다루지않는 이유중하나가. 이런 광범위한 마케팅이나 컨설팅 사례들이 계속해서 등장하기때문이고 심지어는 이런. 전체 인테리어와 디자인 브랜딩을 함께 맡는 일관성 높은 디자인 브랜딩업체들도 등장하고있기때문입니다.
https://brunch.co.kr/@paikmh77/21
우리한테 와. 우린 일관적인 공간과 브랜딩까지 한번에 해준다고! (A=B 왜? C니까) 같은 , 확실한 전략을 띠고있는걸 알수있죠. 결국 이런 정보정리측면에서.볼때는. 하나의 작은 디자인에서부터시작해서 하나의 페이지. 심지어는 회사나 마케팅 전략마저도 이런 한줄의 문장으로 정리가된단걸 알수있습니다.
https://brunch.co.kr/@clay1987/50
제가 기존에 반도체 관련 업체에 있을때. 자체 유튜브채널을 만들기위해 분석했던 타사 유튜브 컨텐츠와 마케팅에대한 정리글들중 하나인데요. 실제로 마케터들이나 광고대행사들은 하나의 키워드. 메시지를 핵심으로잡고 그걸 설명하기위한 시각화를 진행합니다. 그렇기에 여기에 들어가는 논리또한 A=B다. 왜? C니까. 라는 아주 간단한 핵심일수밖에없습니다.
이런 '논리적 분석'을 기반으로 사이트들과 디자인을 들여다보는 훈련과정 역시. UI 디자인 뿐 아니라. 디자인 전반의 문제해결능력을 위한 훈련방식중 하나입니다. 그렇기에 PPT라는게 '이제 끝났대. 안써도된대'로 끝날 부분이아니라. 거기에서 쓰이는 문장력과 정보정리. 그리고 그걸 다시 - UI 디자인이나. 편집디자인. 압축된 논리가 담긴 시각물로 풀어내는 '기획능력'은 절대로 사라진게 아니란걸 기억해야합니다.
https://brunch.co.kr/@taekangk/44
해당 글은 삼성맨이었다가 아마존에 입사한 분의 아마존 관련 게시글인데 사실상 여기에서도 동일한 이야기를 보실수있습니다. 아마존의 기업문화엔 PPT가 없습니다. 압축적이고 확실한 전달력을 위한 방식인거죠. 다만 거기서 끝나는게 아니라. 항상 '아이디어를 글로 정리하고, 핵심내용을 단번에 이해할수있도록' - 수준높은 논리를 구성하도록 하는 훈련을 기업 문화로삼고있다는걸 이야기해줍니다.
사실상 이런 부분들 들여다보게되면. 단순히 한 페이지로만 구성된 단순 레이아웃의 홈페이지만으로도 정확한 가치판단. 장단점 분석이가능하도록.뼈만 남겨야하는거니까. UI 디자인 역시도. '어떤 정보가 왜 중요한지'를 확인하는. 정보의 선별이 중요해진다는 점에선. 똑같은 거라고 보여지네요.
아마존의 PPT 없는 문화에 대한 설명규격이 단순해진다고해서 메시지가 명료해지는것이 아니듯이. 결국엔 정보 압축 / 선별능력이중요해집니다. 사실 그런면에서 제가 채택되지않은 아이디어라는 책을 추천하는 이유도. 정보의 시각화와. 다양한 압축정리가 정말 잘 되어있습니다. 디자이너가 책을 만든다면 이정도여야하는구나 싶을 정도로 논리의 구성 자체를 다시 - 시각화를 해뒀어요.
제가 다른분들께 항상 추천하는 책이지만. 현재 절판된 - 이 사람은 왜 정리에 강한가.라는 유니크로 관련 브랜딩과 광고를 진행한 사토 가시와 라는 아트디렉터 역시 '창의성'이라는 것은 결국 정보의 압축적 정리와. 맥락 만들기에서 나온다.라는 점을 이야기합니다. 그리고 실제 정보정리에 대해서 굉장히 강조를 하고있구요.
http://www.yes24.com/Product/goods/55219941
그래서 사실 제가 초보 디자이너들에게 훈련시키는 반복코스중 하나가 바로. 포스터나 간단한 정보규격같은것들을 정리시키고. 그 정보들중 우선순위. 2~3개 요소만 남겨도 이해가될수있도록. 정보를 정리시키는 방식입니다. 해당 내용은 추후 유튜브 라이브를 통해서 실제 자세한 설명을 드리겠지만. 병아리같은 대학생 인턴들. 두달 가르쳐서 정확히 제가원하는 자료를 찾을수있는 정도로 훈련시킬수있었던 경험도. 이런 정보정리에대한 핵심을 스스로 납득하게한 이유 덕분이었습니다.
대부분 시각물 자체에는 집중해도. 디자인 이전에 정보논리. 체계가 엉망이거나. 글을 정말 못쓰는 디자이너들이 많은데요. 결국 이런 문제는 여러 UI 요소들이나. 데이터테이블에서의 '어떤 정보를 보여줄것인가'에대한 질문과도 연결이됩니다. 그리고 그 과정을 실무자들에게 확인하고. 고객들에게 확인하고. 데이터를 기반으로한 UI 개선이나. 설계과정에있어서도. 단연코 핵심이되는 능력이죠. 개발로 넘어갈때는 당연히 중요하구요.
https://freebie-curation.com/25
파워포인트의 시대는 확실히 갔습니다. 하지만 이런 규격들이 여전히 웹사이트와 서비스 제안이라는 형태로 남아있고 이 안에 담긴 논리. A=B다. 왜냐하면 C이기 때문이다.라는 이 핵심은 아마 인류역사가 멸망할때까지 사라지지않을 핵심일겁니다. 시각물의 퀄리티는 항상 논리 다음에 옵니다. 김기사같은 단순한 앱서비스나 토스가 성공할수있었던 이유가 '단순하고 확실한 기능'. 바꿔말하면 '서비스가 줄수있는 이득의 명확성'입니다. UI가 사업을 성공시킬수없는 것 또한 이런이유에서입니다.
https://www.youtube.com/watch?v=F7tmSG4pKe4
기존 영상에서도 이야기드렸듯이. 결국에는 한줄의 핵심논리. 고객의 지갑을 열게하는 그 '상대적인 장점이 무엇인가'를 꿰뚫어야 브랜딩의 핵심인 전략을 짤수있습니다. 그리고 그 핵심을 좀더 작은 범위에서 들여다보아야. 포스터 하나. 그 페이지에서 가장 강조되어야할 버튼 하나.타이틀 하나가 남게됩니다.
그러니 추후에 여러분이 좀더 자신을 수련해서. UI 전문가나. 기획, 디자인 전문가가 되길 원하신다면 다른사람에게 자신의 논리를 한줄요약해서 이야기할 수 있을정도의 분석 / 논리전개를 훈련하시는게좋습니다. 그 한줄의 논리가. 앞으로 여러분의 강점을 그대로 드러내줄 힘이되어줄테니까요.
추후에 사이트를 분석하거나. 서비스 전반의 장단점을 분석하는 방식에대해서도 이야기를 해보겠지만 결국 '모든건 분석과 정리에서 시작된다'라고 생각합니다. 앞으로도 여러 IT 분야들을 더 들여다보고 확인을 하겠지만. 이런 '분석 자체에대한 훈련방식'에대해서도 추후엔 유튜브 라이브를 통해 다뤄보도록 하겠습니다.
오늘 이야기한 내용은 다음과 같습니다
1. PPT가 사라지고있는 시대이지만, PPT에 담긴 핵심가치 요약 / 제안이라는 형식은 절대 사라지지않는다.
2. 모든 서비스의 제안에 담긴 논리는 A=B이고, 그 이유는 C이다.라는 아주 간단한 논리이다. 그 논리가 확실하게 고객을 사로잡아야 구매나 사용이 이루어진다
3. 포스터나 ppt, 심지어 웹사이트들이나 마케팅또한 이런 간단한 논리구조를 통해 , 하나의 키워드를 뽑아낼수있다.
4. 모든 시각물들과 마케팅, 영상이나 규격들 또한 작은 범위에서. 최고로 중요한 정보들과. 그렇지않은 정보들이 나뉜다. 그리고 그 위계질서를 정확히 만들어야 좋은 정보규격이된다.
5. 정보정리와 창의성은 서로 밀접하게 연결되어있다. 그런면에서 광고디렉터들의 정보정리능력과 창의성은. 그야말로 엄청난 수준이다.
6. UI 디자인에 있어서도 개별 정보들중에 무엇이 가장 중요하고. 무엇이 가장 강조되어야할지에대한 부분을 판단, 정리하는 능력이 실제 실무에서 매우 중요해진다.
7. 시각적인 규격에대한 연구 외에도.글을 쓰고 정보를 정리하는 훈련을 반복해야하는 이유도 여기에있다. 개별 서비스나 브랜드의 강점을 정리하고, 이걸 다시 규격화하기위해서는 이런 훈련이 필수적이다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
