Blog

이룰 수 없는 꿈을 꾸고 이루어질 수 없는 사랑을 하고 이길 수 없는 적과 싸움을 하고 견딜 수 없는 고통을 견디고 잡을 수 없는 저 하늘의 별을 잡자. … 지금보다 더 나은 세상을 꿈꾸어야 하오. 꿈꾸는 자와 꿈꾸지 않는 자, 도대체 누가 미친 거요?

돈 키호테, 미켈 데 세르반테스

디지털 서비스의 메가 트렌드

디지털 서비스는 지금 계속 발전하고 앞으로도 큰 이변이 없다면 계속 발전할 것입니다. 이런 발전의 트렌드를 보면 총 3가지로 설명할 수 있습니다. 개인 맞춤, 연결 그리고 쉽고 전문적인 방향으로 진행하고 있습니다. 이 꼭지만 뽑아서 따로 설명을 드리도록 하겠지만 여기서 간단하게 설명드린다면, 개인 맞춤은 가지고 있는 스마트폰의 앱 아무거나 열어보시기 바랍니다. 거기에 내 계정이 있고 내 계정 중심의 서비스가 펼쳐지게 됩니다. 이것은 개인이 개인의 경험만하기 때문에 비교하지 못하는 사이에 내 앱들은 나에게 맞춰진 서비스를 제공해주고 있습니다. 다른 사람의 스마트폰을 한달동안 쓴다고 생각해보면 불편함은 끔찍하지 않습니까? 이것이 개인 맞춤입니다.

연결은 너무도 광범위한 개념입니다. 쪼개서 생각을 해보면 개인 맞춤의 연장선으로 기기간의 연결이 있습니다. 그리고 디지털 서비스를 통해 사람들간의 연결도 중요한 개념입니다. 이것을 더 혁신적으로 하기 위해 메타버스라는 개념이 등장하는 지금입니다. 마지막으로 쉽고 전문적인 방향으로 진행한다는 개념은 누구나 쉽게 디지털 서비스에 접근할 수 있도록 만드는 것이 디지털 서비스의 방향성입니다. 기본적으로 어려웠던 레거시 앱들 예를 들어 포토샵이나 인디자인 같은 것들도 튜토리얼 등을 제조사에서 제공함으로써 진입장벽을 낮추려고 합니다. 그리고 어려운 개념이 많은 금융앱들 중 가장 혁신적이라는 토스는 사용자 저변을 넓히기 위해 쉬운 용어로 해설하고 서비스의 통일성을 맞췄습니다.

이것이 디지털 서비스의 메가 트렌드라고 볼 수 있습니다. 하지만 이 메가 트렌드를 진행하면 할수록 더 개발하기 어려워지며 프로그램이 복잡해지는 것이 사실입니다. 리눅스는 편리하지 않고 단순해서 오류가 적습니다. 하지만 윈도우나 맥은 리눅스 대비해서 오류가 많습니다. 그 이유가 복잡하고 많은 서비스를 제공하고 있으며 편리하게 만들기 위한 노력의 산물이라고 생각하면 편합니다.

서비스가 정교해질수록 오류가 많아진다.

앞서 간단히 이야기를 했는데 트렌드를 맞추고 사용자들에게 편리한 서비스를 만들어 사용자에게 가치를 제공하는 일이 디지털 서비스에서 제가 바라는 목표입니다. 아니 더 크게 보면 대부분의 기업이 바라는 목표라고 생각합니다. 하지만 그렇게 하기위해서는 더 많은 서비스 기획과 화면 디자인 그리고 퍼블리싱과 개발이 필요합니다. E-Commerce의 장바구니 서비스를 커스텀해서 만들려고 한다. 이거 일 장난 아닙니다. 스토리보드가 몇장이 나와야 하고, 생각할 수 있는 가지수가 몇개이며, 나와야하는 화면 모듈의 개수와 퍼블리싱과 데이터 저장 및 연동을 책임지는 부분에서의 공수는 얼마로 산정을 해야할까요?

요즘 서비스 개발은 그렇게 커스텀이 많지 않다면 이미 나와있는 솔루션 모듈을 쓸부분만 도려내고 사용하는 추세입니다. 하지만 이것또한 다른 서비스 모듈과 겹치는지 아닌지를 파악해야하는 난제가 있습니다. 그리고 서비스가 무거워지죠. 이렇게 서비스가 고도화될 때마가 제공하는 사람은 더 긴장하게 됩니다. 뭐를 바꾸면 기존에 되던게 안되기시작하는 순간이 바로 모니터를 부시고 싶어지는 순간입니다. 그렇지 못해서 담배를 피고 머리를 뜯고 하는 과정을 거쳐서 서비스를 고도화합니다.

여러부에게 더 많은 편리함을 제공하기 위해서 우리는 이렇게 노력하고 있다는 것을 알아주셨으면 좋겠습니다. 근데 이것은 그냥 변명입니다. 사용자는 냉정해서 오류가 있는 서비스에 다른 대안이 있다면 오류가 심각한 서비스는 없어집니다. 사용자들은 이런 고생을 알아주지 않습니다.

오류 0%에 도전하다

앞에 이야기했던 돈 키호테의 멋진 명대사 우리는 불가능에 도전하는 사람이다. 디지털 서비스에서 오류가 없을 수 없다는 전제를 깔고 들어가지만 안정적으로 디지털 서비스를 확장해나가려면 당연히 선행되어야 하는 것들이 있습니다. 정보처리기사 단골 문제이기도 한 응집도는 높이고 결합도는 낮춘다. 그래서 코드의 재사용성을 높인다는 것이 가장 기본적인 것입니다. 이것을 실행하면 그나마도 서비스를 안정적으로 개발할 수 있습니다. 하지만 혼자서 하는 프로젝트는 없습니다. 디지털 서비스에서는 없습니다.

그래서 오류를 낮추고 안정적으로 서비스를 확장하기 위해서는 구성원들간의 커뮤니케이션이 중요합니다. 따라서 각자의 파트에서 쓰는 용어로 커뮤니케이션을 하면 문제가 생길 확률이 치명적으로 증가하고, 서비스 확장에 걸리는 시간도 오래 걸립니다. 그래서 UX/UI 디자인 쪽에서는 디자인 시스템이라는 공통의 언어로 커뮤니케이션 하는 상황을 만들고자 하는 것입니다.

물론 오류 0%에 도달할 수 없습니다. 그렇다고 아무것도 안하고 지금 이래라고 낙담하고 있기에는 우리의 자원이 너무 아깝습니다. 그래서 해결할 수 있는 가장 쉬운 문제인 눈에 보이는 디자인 시스템을 통해 오류율 0%에 도전하는 것을 추천합니다. 우리 서비스도 아직 도입하지 못했지만 도입하고 원활한 서비스를 만드는 것이 제 꿈입니다. 그래서 다음 시리즈는 디자인 시스템에 대한 이야기를 하고자 합니다.

콘텐츠를 만들 때, 디자이너는 교육을 받습니다. 콘텐츠 간 통일성을 유지해야 된다고, 근데 지금 개발새발 그린 그림을 못올리는 이유가 애플펜슬이 어디있는지 못찾겠네요. 그냥 양해해주세요~

---

앞서 글에서 밝힌 서비스의 종착역입니다. 옛날에는 스마트폰과 스마트폰 길찾기가 없던 시절 초행길인 사람들은 차를 인도쪽으로 붙어 사람들에게 길을 물어보곤 했습니다. 대답을 들으면 조수석쪽 창문을 올리고 목적지를 향해 갑니다. 저는 결과페이지가 그와 같다고 생각합니다. 운전하는 사람이 정확하게 가고자 하는 방향과 방법을 알았을 때 목적을 성취한 페이지라고 보고 싶습니다. 서비스의 성격에 따라 검색결과 페이지에 노출하는 것도 달라집니다.

검색엔진은 주로 이동할 수 있는 웹사이트를 노출해주고, E-Commerce는 검색결과에 가장 부합하는 상품 혹은 그 당시에 가장 잘 나가는 제품을 사용자에게 보여줍니다.

---

Google

구글 검색결과는 지금 보면 시각적으로 강약조절이 잘되어있는 것을 확인할 수 있습니다. 하지만 과거 구글이 세리프체로 되어있던 시절에는 검색결과는 강약조절은 파란색 텍스트는 링크고 하위에 노출된 정보는 해당 웹사이트의 정보였습니다. 그래도 구글은 좋았습니다. 가장 검색어에 일치하는 정보를 제공해주었기 때문입니다.

제가 중학교때는 검색 경진 대회라는 것이 있었습니다. ㅋㅋ 지금 생각해보면 말이 안되는 대회이지만 컴퓨터로 제시어를 주고 정답을 제일 먼저 다 찾는 사람부터 상을 주는 것이 었습니다. 그때 네이버는 생각보다 검색결과 양이 적어서 사용하지 않았습니다. 그때 구글을 사용해 대회에 참가를 했습니다.

그때는 검색결과가 디자인 적으로 구조적이라기보다 그냥 검색결과를 나열하는 느낌이었습니다. 근데 지금은 정말 결과 값이 깔끔하게 노출되어 검색 결과도 노출이 잘되고 시각적으로도 정보 습득에 있어 유익한 검색엔진이라고 생각합니다. 하지만 구글에서 맛집 후기 여행 후기를 찾는 것은 추천드리지 않습니다. 국내의 모든 후기는 거의 네이버에 있기 때문에 평균적인 분위기를 알기 위해서는 네이버를 사용했습니다. 하지만 이것도 시대가 바뀌어 검색을 유튜브로 하는 시대에 접어들었다고 합니다.

앞으로의 미래는 어떻게 될까요? 정말 텍스트가 사라지는 시대가 올까요?

---

Naver

네이버 검색결과입니다. 네이버와 구글은 같은 검색엔진의 역할을 수행하고 있습니다. 하지만 국내에서 점유율이 잘 나올때 90% 이상을 점유했던 검색엔진입니다. 하지만 지금 블로그의 광고가 검색결과를 망쳐놓았고, 스마트폰 시대로 들어오면서 양쪽 OS 다 기본 검색엔진으로 구글을 사용하고 있기에 점유율이 점점 밀리는 현상이 몇년째 이어지고 있습니다. 네이버를 혹자는 소셜미디어로 보는 견해도 있습니다만, 검색엔진은 검색엔진이지요. 그리고 국내 최고의 디지털 서비스 업체인 만큼 거는 기대와 희망을 거는 서비스입니다.

검색 결과를 보면 구글과 다르게 정확한 정보도 노출을 하지만 제공자 관점에서 주로 정보를 노출하는 느낌을 많이 받습니다. 네이버를 실제 사용하는 사용자에게 주도권을 준다면 어떤 모습이 되어야 할까요? 사용자에게 주도권을 과연 주어야하는 것일까요? 이 질문은 항상 제가 UI/UX 디자인을 하면서 던지는 질문입니다. 사실 자본주의위에서 살고있기 때문에 기업입장에서는 돈을 주는 사람이 가장 중요한데, 그들이 노출하고 싶은 정보를 노출하고 돈을 지불하는 구조입니다. 하지만 네이버가 다른 서비스보다 비용이 높은 것은 당연히 많은 사용자가 머무는 서비스이기에 가능한 것이지요. 그래서 이게 맞다 저게 맞다는 솔직히 모르겠습니다.

바다 건너 나라인 일본 혹은 다른 나라를 보면 국내 서비스가 검색엔진 점유율이 높은 곳은 거의 없습니다. 일본은 야후, 나머지 국가는 구글이 장악하고 있습니다. 구글은 인터넷이 없는 나라에서는 전화로 검색을 할 수 있는 서비스도 제공하고 있습니다. 이런 글로벌 시장 상황에서 국내의 기업이 국내 그리고 웹툰, 메신저 등으로 선전하고 있는 것을 보면 뿌듯합니다.

네이버 화이팅!

---

11st

---

SSG.com

---

Farfetch

E-Commerce는 상품을 노출합니다. 가장 인기있는 상품이 노출되는 구조로 되어있는 것으로 알고 있습니다.

사용자에게 많은 입력을 요구하는 것은 죄악입니다. 사용자가 원하는 것을 바로 제시해주지 못하는 서비스는 앞으로 역사속으로 사라질 것입니다. 검색어를 입력할 때 우리는 머리속에 단어를 가지고 있습니다. 그것을 입력하는 과정을 완벽하게 거쳐야만 올바른 검색 결과를 통해서 사용자가 원하는 곳으로 이동할 수 있습니다. 하지만 많은 사용자들이 검색하는 검색어는 따로 있습니다. ‘ㅊ + ㅜ + ㅁ’을 입력하게 된다면 ‘춤추기’, ‘춤배우기’ 등 사용자들이 검색하는 단어는 한정적입니다. 춤꾸러기라고 검색할 사람은 거의 없습니다. 있으면 특이한 케이스입니다. 그렇다면 연관 검색어 서비스가 나오기 전에 제공자들은 생각했습니다. 검색한 키워드를 입력하는 순간에 알려주는 것은 어떨까? 그렇게 만들어진 서비스가 검색어를 입력하는 도중 하단에 노출되는 완성된 단어가 노출됩니다.

여기에 더해 트렌드라는 개념을 더한다면 검색어를 입력할 때 사용자들이 검색하는 검색어에 트렌드가 있어서 이 두가지를 접목하면 사용자들이 많이 찾으며, 더 최근에 많이 찾게된 검색어를 상단에 올린다면 사용자가 더 편리하지 않을까 하면서 고안된 기능입니다. 근데 검색바 있는 하단에 노출되는 경우가 많은데, 구글과 네이버는 내가 검색했던 검색어를 같이 제공하고 있습니다. 물론 제일 상단에 배치하는 것을 원칙으로 서비스를 제공하고 있습니다.

앞으로 연관 검색어 영역이 어떻게 바뀌게 될까요?

---

Google

구글은 아이콘으로 연관 검색어와 최근 검색어를 구분해 제공하고 있습니다. 최근 검색어는 앞에 시계 모양의 아이콘을 통해 시간이라는 것을 암시하고 미래 검색어는 없을 것이니, 과거 사용자가 입력했던 검색어임을 알 수 있게 합니다. 일반적인 연관검색어는 앞에 돋보기 모양의 아이콘이 있습니다. 그리고 우측에 있는 좌상단으로 향해있는 아이콘이 검색창에 연관 검색어를 넣어주는 느낌이 들어서 사용자에게 선택을 유도하는 것처럼 보입니다.

다크 테마에서 잘 보이지 않지만 연관성이 있는 어휘는 하이라이트 되어있음을 확인할 수 있습니다.

---

Naver

네이버는 구글과 동일한 로직과 노출 구조를 가지고 있습니다. 하지만 차이점이 있다면 부가적인 검색을 키보드위에 있는 버튼 3가지를 통해 진행할 수 있어, 더 다양한 인풋을 통한 검색이 가능하다는 점입니다. 근데 이것을 키보드를 통해 입력하는 중간에 눌러서 사용하는 사용자가 과연 많을까요?

---

G Market

이커머스에서 사용하는 것은 연관된 키워드만 하이라이트하는 것으로 보입니다.

---

SSG.COM

SSG.COM은 연관 검색어를 두가지로 분리해 공식브랜드관 검색과 키워드 검색을 구분해 제공하고 있다.

---

Farfetch

Farfetch는 실시간 검색을 진행해 결과값을 하단에 바로 노출하고 있다.

나는 검색을 할때 궁금증이 생기면 한다. 궁금증을 생각 혹은 지식이 떠오르지 않으면 한다. 그리고 이유와 생각을 찾기 위해서 검색을 활용한다. 머리를 외주화한 느낌이고, 그런 외주화된 것들이 모여서 만들어낸 인터넷이라는 공간에 모이는 역할을 한다고 봅니다.

검색 전 부터 검색 결과를 통해 원하는 곳으로 이동하기의 까지 크게 보면 아래와 같다.

1. 검색이 필요한 상황이 발생한다.
2. 검색을 한다.
3. 원하는 곳으로 이동한다.

1. 검색이 필요한 상황이 발생한다.

까먹었다, 물건이 필요하다, 지식이 부족하다, 궁금하다, 알고싶다, 등등 사용자에게 니즈가 발생한 상황입니다. 이때 이 니즈를 빠르게 해소하기 위해 우리는 약속된 검색 버튼을 사용하면 검색어를 입력할 수 있는 인풋박스가 나옵니다. 그 전에는 야후 카테고리 방식이었습니다. 그때는 화면 배치가 중요하다고 생각을 했습니다. 하지만 그것은 사용자에게 불편을 전가하는 방식이었습니다. 검색어를 입력해서 결과를 보여주고 바로 이동하게 하는 것이 사용자에게 가장 필요한 서비스라고 봅니다. 특히 검색엔진에서는 말이죠. 야후와 구글의 갈림길에서 사용자는 편리한 구글을 선택했으며, 세상 모든 검색결과가 있는 구글을 더 신뢰하기 시작했습니다.

여러분들은 어떤 상황에서 검색엔진 혹은 검색기능을 켜시나요. 공통된 상황은 사용자가 원하는 것을 못찾는 상황임에는 틀림없습니다. 서비스를 사용 중일 때는 사용자에게 그럴싸한 상품과 콘텐츠를 소개하지 못한 것이고, 서비스 이용중이 아니라면 대부분은 정보가 필요한 상황일 것입니다.

2. 검색을 한다.

검색은 여러 종류가 있는데, 키워드 검색과 그 외의 콘텐츠로 검색하는 방법이 있습니다. 그 외의 대표적인 방법으로는 이미지, 소리를 통한 
검색이 필요한 상황에 필요한 결과물을 찾을 수 있는 키워드를 입력해야합니다. 만약 제가 새로운 쿠키를 만들고 싶어 필요한 준비물을 검색할 때 ‘쿠키 만들기 준비물’ 이렇게 입력해야 결과물이 노출되는데 ‘쿠키’ 만 치게 되면 내 생각과 다른 결과물이 노출되게 됩니다. 내가 원하는 검색 값을 얻을 때 까지 키워드를 바꿔가면서 검색하게 됩니다.

이 과정은 과거 사전에서 단어를 찾는 것과 비슷하지만 전혀 다른 경험을 제공합니다. 사전과 도서관에서는 내가 찾는 정보를 찾기 위해서 무수히 많은 우연한 마주침이 일어납니다. 그 과정에서 우연히 마주친 정보가 더 맘에 끌리는 경우도 있습니다. 하지만 키워드 검색은 오타 혹은 검색어를 잘못 입력하지 않고 서는 우연한 마주침이라기보다 정확한 충돌을 만들어내야 하는 기능입니다. 그렇기 때문에 정확성이 중요한 것이고, 검색 결과를 노출할 때 중요한 것은 상단에 배치하고, 중요하지 않은 것은 화면 하단에 배치하는 것이 유리합니다.

디지털 업계에 있는 사람들에게 통용되는 말인데, 두 번째 페이지는 없다 입니다. 이 말은 대부분의 사람들은 검색을 할 때 페이지네이션된 2번째 장으로 넘어가는 경우가 거의 없습니다. 이를 감안하고 중요한 것은 무조건 첫 번째 페이지에 노출하는 것이 좋습니다.

3. 원하는 곳으로 이동한다.

결국 검색엔진이나 서비스 내 검색을 했다면 원하는 것을 찾은 즉시 그곳으로 이동하게 됩니다. 이렇게 그곳에서 궁금증 혹은 갈증을 해소하고 사용자는 만족감을 느끼게 됩니다.

컴퓨터가 생긴 이후 키워드 검색은 너무도 당연한 것이 되었다. 이전에는 도서관에서 책과 정보를 찾을 때 색인된 것을 기준으로 데이터를 찾는 것을 수행했다. 하지만 CLI가 생긴 이래로 우리는 키워드를 통해 검색을 하고 검색에 결과가 없다면 몇 번을 더 시도해본 다음 없으면 없다고 생각을 해버리는 시대에 살고 있다. 돋보기는 초등학교 이후로 꺼내본 적이 없지만 검색창에서는 매일 볼 수 있는 픽토그램이자 아이콘이다.

검색 UI 진입

서치바(검색어 입력 영역)에 진입했을 때 크게 2가지의 구분점으로 구분할 수 있다. 하나는 정보 입력 유도 방법, 나머지 하나는 진입했을 때 키보드를 노출하는지 안 하는지로 구분할 수 있다.

---

Google

구글은 정보 입력을 유도하는 방법으로 상단에 키워드 검색바를 제외한 나머지는 배치하지 않았다. 심플하게 해서 사용자에게 검색엔진이라는 이미지를 심고, 부각하고 싶은 메시지는 doodle을 통해 제공하면서 사용자와 소통을 한다. 검색을 통해 다른 곳으로 이동시켜주는 곳이며 구글이라는 이미지가 강력하게 심어지는 계기가 된다. 물론 이것은 야후와 과거 네이버와 비교했을 때의 이야기이다.

---

Naver

과거 대비해서 네이버 검색창과 그린닷이 돋보이는 디자인으로 검색을 유도하고 있다. 도입했을 때 유저들의 반발이 심했다. 그전의 디자인과 방향성이 너무 많은 정보를 제공했기에 호불호가 명확하게 갈리는 지점이 있었다. 나는 변경했을 때 바뀐 디자인을 선호했다. 하지만 여기서 하나 배웠다. 급속한 업데이트와 많은 부분에서 변하는 것은 사용자들로부터 반발을 산다는 것을 확인할 수 있었다. 반면 구글은 로고를 교체했을 때를 제외하면 알게 모르게 하나씩 하나씩 바꿔 사용자들도 모르게 업데이트가 되어있다. 이 방법이 사용자들로 하여금 반발 없이 업데이트할 수 있는 방법이라고 생각한다.

사용자가 많이 사용하는 서비스라면 당연히 모든 사람을 만족시키는 디자인을 할 수 없다. 제약 사항을 충분히 확인하고 현실적인 방법을 모색하는 것이 가장 현명한 방법이다.

그리고 구글과 네이버의 방향성이 명확하게 차이나는 것은 데스크톱 검색이다. 하지만 모바일에서도 큰 차이가 나는 것을 확인할 수 있다. 구글은 하단에 다른 콘텐츠가 없는 반면에, 네이버는 하단에 콘텐츠와 광고가 노출되는 것을 확인할 수 있다. 이것이 구글과 네이버의 방향성의 차이라고 본다. 어떤 게 더 좋다, 나쁘다를 판단하기보다 비즈니스 방향성에 따라 UI의 구성과 룩 앤 필이 변경되는 것을 확인할 수 있는 계기가 된다.

---

G-Market

검색 아이콘을 누르면 하단에서 Floating Layer가 올라와 검색을 진행할 수 있게 만들어주는 UI를 제공하고 있다. 여기서 이렇게 레이어 팝업으로 처리한 이유는 하단의 페이지를 유지하는 니즈가 많았으리라고 판단된다. 화면의 이동이 아닌 팝업으로 처리하는 장점은 해당 검색에 진입하기 전까지 있던 내용을 저장하지 않고 그냥 두고 그 위에서 부가적인 작업을 하는 것이기에 다시 바닥 페이지로 이동하는 것이 유리하다. 이 UI는 11st도 마찬가지로 사용하고 있는 UI이다.

---

SSG.com

검색 영역을 누르면 검색 영역이 확장되면서 바로 검색어를 입력할 수 있도록 OS 키보드를 호출하는 것을 확인할 수 있다. 검색이 메인되지 않은 서비스에서 검색을 눌렀다는 것은 키워드 검색을 통해 빨리 상품을 찾고 싶은 니즈를 읽었다고 본다. 그래서 해당 페이지로 진입했을 때 바로 키워드를 입력할 수 있게 키보드를 노출하는 것은 정말 세심하게 사용자를 잘 배려했다.

---

Farfetch

고급 의류 브랜드를 판매하는 서비스의 느낌을 살리기 위해 광고 혹은 이미지로 콘텐츠를 전달하지 않고 사용자에게 최소한의 정보를 통해 상품을 검색할 수 있는 환경을 제공하고 있다.