롱블랙과 태니지먼트가 만났을 때 ②

롱블랙과 태니지먼트가 만났을 때 1편 보러가기 (링크)

#04
웹사이트가 아니라 '한 권의 에디토리얼 노트'처럼

랜딩 페이지를 지나 유저가 마주하게 되는 진짜 알맹이, 바로 '인사이트 리포트'를 만들 차례였습니다.

사실 처음에 비즈니스 팀에서 클로드(Claude)로 빠르게 짜서 보여주셨던 리포트 시안은,
아이콘이 빙글빙글 돌아가고 화려한 인터랙션이 들어간 전형적인 랜딩 페이지 형태였어요.
물론 반응형을 구축하거나 개발하기에는 그런 익숙한 웹 형태가 더 편했을지도 모릅니다.

하지만 제 눈에는 위아래로 길게 스크롤하는 전형적인 웹사이트보다,
진짜 종이 잡지나 매거진을 펼쳐 읽는 듯한 감성이 유저에게 훨씬 깊은 몰입감을 줄 것 같더라고요.

그래서 화면 가운데에 진짜 책처럼 좌우 양면 지면을 배치하고, 하단 페이지 번호와 큼직한 세션 넘버링까지 살려낸 잡지 형태의 레이아웃을 다듬었습니다. 유저 머릿속에 있는 '글을 읽는다'는 익숙한 상식은 지켜주면서, 디지털 리더로 읽는 듯한 신선한 비주얼 쾌감을 주고 싶었죠.

특히 롱블랙 아티클을 추천해 주는 세션이 진짜 마음에 들게 나왔는데요. 흔히 보이는 뜬금없는 웹 배너 형태가 아니라, 잡지 기사 한가운데 정갈하게 배치된 스페셜 컬럼 박스처럼 본문 흐름 안에 매끄럽게 녹여냈습니다.

여기에 쿠폰을 받는 영역에서는 지면의 책장을 넘기듯 배경색을 샥- 바꿔버리는 파격적인 컬러 변주까지 더해, 읽는 재미와 보는 즐거움을 모두 챙긴 한 권의 '에디토리얼 리포트'를 완성했습니다.

#05
때로는 약간의 불편함도 강력한 '스타일'이 된다

이번 프로젝트를 치러내며 제 안에서 가장 크게 박살 난 고정관념이 하나 있습니다.
저는 지금까지 디자인을 할 때 '유저의 편의성(UX)'을 무조건 1순위로 두는 디자이너였어요.
"어떻게 해야 더 편하게 읽을까?", "어떻게 해야 덜 클릭하게 만들까?" 같은 고민이 늘 제 디자인의 정답이었죠.
하지만 이번 인사이트 리포트 작업을 진행하고 여러 레퍼런스를 깊게 파고들면서, 제 안에서 신선한 충격이 일어났습니다.
"브랜딩과 비주얼을 위해서라면, 때로는 아주 약간의 불편함도 근사한 '의도'이자 스타일이 될 수 있겠구나!" 하는 깨달음이었습니다.

해리 포터의 움직이는 신문 같았던 레퍼런스, '모아진'

리포트 구조를 고민하며 웹소설 사이트나 여러 매거진 플랫폼을 정말 많이 찾아봤는데요.
그중에서 '모아진'이라는 잡지 사이트의 UI가 머리를 딱 때리는 수준으로 인상적이었습니다.

사이트에 들어가자마자 펼쳐진 잡지 표지들이 그냥 멈춰있는 정지 이미지가 아니었거든요.
AI를 활용해 표지 속 인물과 배경이 스르륵 움직이는데, 마치 영화 <해리 포터> 속 '움직이는 신문 지면'을 직접 보는 듯한 신박함을 주더라고요. 비주얼의 압도적인 완성도만으로 이미 사이트의 감성에 유저를 스르륵 빠져들게 만드는 힘이 있었습니다.

텍스트는 넘치는데 스크롤바가 없다고?

더 재밌었던 건 잡지를 추천해 주는 페이지였습니다.
이 잡지를 왜 읽어야 하는지 설명하는 텍스트가 화면에 빽빽하게 넘치는데, 이상하게 스크롤바가 아예 보이지 않는 구조였어요.

사실 교과서적인 UX 관점으로만 보면 '유저 입장에서 탐색하기 어려운 나쁜 UX'라고 평가할 수도 있었을 겁니다.
하지만 화면에 거슬리는 스크롤바가 싹 사라지니 지면 자체가 믿을 수 없을 만큼 깔끔하고 스타일리시해 보이더라고요.

유저가 아주 잠시 헤맬 수는 있어도, 눈에 들어오는 비주얼이 워낙 훌륭하다 보니 "아, 이건 디자이너가 다 생각이 있어서 이렇게 짠 연출이구나!" 하고 자연스럽게 납득해버리게 되는 매력이 있었습니다.

편의성 1등주의 디자이너의 고백

물론 유저를 무작정 불편하게 만들어서 혼란을 주자는 뜻은 절대 아닙니다.
하지만 태니지먼트라는 브랜드를 유저의 뇌리에 각인시키는 방법이 꼭 '남들과 똑같이 익숙하고 편한 전형적인 웹사이트'일 필요는 없다는 걸 깊이 느꼈습니다.

조금은 낯설더라도 진짜 잡지 지면을 넘겨보는 듯한 경험을 주고, 본문 맥락에 맞춰 배경색을 파격적으로 바꿔버리는 시도들. 편의성만을 최우선으로 두던 저에게는 상당한 용기가 필요한 도전이었지만, 결국 유저의 마음을 흔드는 건 "어? 이 리포트 뭔가 감각적이고 근사한데?" 하는 시각적 잔상이라는 걸 깨달은 값진 계기가 되었습니다.

#06
디자이너로서 느낀 솔직한 자책과 아쉬움

프로젝트를 진행하다 보면 "아, 이 부분은 내가 조금 더 신중했어야 했는데!" 하고 스스로 머리를 감싸 쥐게 되는 순간들이 있습니다.
이번 프로젝트에서도 제 숙련도와 협업 프로세스 면에서 많은 걸 돌아보게 되었어요.

"당연히 알겠지?"라는 안일함이 부른 미스

첫 번째는 화면 정책서를 작성할 때 제 꼼꼼함이 모자랐던 부분입니다.
상단에 고정(Fixed)되어야 하는 요소를 보며, 제 머릿속에는 이미 너무 자연스럽게 그려져 있던 화면이라 정작 정책서에 꼼꼼히 글로 적어두는 걸 놓쳤던 거죠. 모바일 환경에서 텍스트 크기가 어떻게 바뀌어야 하는지, 반응형 모션의 변화는 어때야 하는지 상세히 챙기지 못했던 겁니다.

명시된 정책서와 스펙대로 정확하게 구현해 주시는 개발팀 입장에서는 당연한 건데, 제가 혼자 '머릿속 지식'에 빠져 디테일을 문서로 남기지 않았던 거죠. 디자이너의 완성도는 결국 정책서 한 줄의 명확함에서 나온다는 걸 다시 한번 배웠습니다.

글과 비주얼이 살짝 어긋났을 때의 슬픔

두 번째는 디자인 작업과 카피 수정의 타이밍이 어긋났을 때 생긴 고민이었습니다.
프로젝트 막바지까지 유저에게 더 뾰족하고 유용한 메시지를 전하기 위해 비즈니스 팀에서 콘텐츠를 지속적으로 다듬어주셨는데요. 기획의 메시지를 고도화하는 꼭 필요한 과정이었지만, 디자인 측면에서는 속으로 소리 없는 아우성을 질렀던 포인트가 있었습니다.

이번 7페이지에 들어간 그래픽 도형들은 단순히 자리를 채우려고 넣은 게 아니라, 초기 문장들이 가진 고유한 느낌과 메시지에 딱 맞춰서 하나하나 정성스럽게 의미를 부여해둔 비주얼 요소들이었거든요.

그런데 메시지의 방향과 문장이 새롭게 다듬어지면서, 글과 도형이 만들어내던 기존의 '찰떡같은 의미적 시너지'가 약간 어긋나는 상황이 발생한 겁니다. 아예 안 어울리는 건 아니지만, 처음에 의도했던 "와, 이 문장에 이 도형 조합 진짜 미쳤다!" 하는 절묘한 조화가 희석된 게 디자이너로서 너무너무 아쉬웠던 거죠.

다음 스프린트를 위한 기분 좋은 과제

이번 경험을 통해, 프로젝트 후반부에 카피를 갈아엎는 일이 잦아지면 디자이너 개인의 고충을 넘어 전체 프로젝트의 병목으로 이어진다는 걸 크게 느꼈습니다.

일반적인 웹 UI와 달리 잡지 폼을 가진 에디토리얼 디자인에서는 글과 이미지의 결합도가 훨씬 높기 때문에 더욱더 단단한 기준이 필요하더라고요. 그래서 다음 스프린트에서는 비즈니스 팀과 머리를 맞대고 "Hi-Fi 단계에 들어가기 전 콘텐츠 뼈대를 확실히 락킹(Locking)하고, 디자인 완수 후에는 맞춤법이나 단순 텍스트 검수만 진행한다"는 가이드라인을 명확히 세워보려고 합니다.

서로 상처받지 않으면서도 일정을 효율적으로 지키고, 퀄리티도 끝까지 유지할 수 있는 스마트한 협업 프로세스를 만들어가는 것.
이것이 이번 프로젝트가 저에게 남겨준 가장 값진 숙제인 것 같습니다.

#07
에필로그 : 완벽하지 않아도 가치 있었던 이유

완벽한 기획이나 여유로운 일조차 없었지만, 이번 콜라보는 우리 팀에게 참 많은 질문과 배움을 남겨준 고마운 프로젝트였습니다.

디자이너로서 고정관념을 깨부수며 비주얼의 힘을 체감했고, 동시에 협업 프로세스의 디테일이라는 귀한 숙제도 얻었으니까요.
이제 이 값진 배움들을 안고, 유저의 일상에 진짜 도움이 되는 더 매력적인 프로덕트를 만들러 가보겠습니다.

상세페이지 구축기를 읽어주신 모든 분들께 감사드립니다!