🎯 디자이너의 눈으로 UX의 디테일에 집착하다

아무리 코드를 쥐어잡고 백엔드까지 넘나드는 '개발자 모드'로 컴파일을 하고 있어도, 제 본진은 결국 디자이너입니다. 화면 한 칸의 여백, 컴포넌트의 정렬, 그리고 유저가 마주할 미세한 뚝뚝 끊김이나 불편함은 도저히 눈감아줄 수가 없죠.

'로고착착'의 초기 버전에는 디자이너의 예민한 시선이 아니면 놓치기 쉬운, 집요하고도 눈물겨운 UX 디테일들이 숨어있습니다. 🔍

1. 화이트 로고도 잘 보이게 + 인쇄 색상까지 챙겨주기

브랜드 로고들을 아카이빙하다 보면 꼭 마주치는 빌런(?)들이 있습니다. 바로 어두운 배경에만 써야 하는 '올 화이트(White) 로고'들이죠.

이걸 일반적인 웹사이트의 깔끔한 흰색 그리드 배경에 그냥 올려두면 어떻게 될까요? 네, 당연히 배경과 동화되어 안 보입니다. 👻 유저 입장에서는 "어? 여기 로고 이미지 없나?" 하고 오해하기 딱 좋은 포인트였죠. 그래서 화이트 로고의 경우 배경 색상을 자동으로 다크하게 반전시켜 주는 LogoViewer 컴포넌트를 도입했습니다.

또한 유저가 로고를 다운로드하기 전에 실제 사용 맥락(웹 화면인지, 인쇄물인지)을 고려해 다각도로 확인하게 만들고 싶었습니다. 그래서 로고 상세 페이지에 Screen/Print 모드 토글 기능을 넣었습니다.

• Screen 모드: 웹 환경을 고려해 배경 투명도와 그리드 가이드를 제공
• Print 모드: 인쇄 맥락에 맞춰 화이트/블랙 배경 가드를 자동 적용

덕분에 유저들은 어떤 색상의 로고든 편안하게 또 유용하게 감상하고 검증할 수 있게 되었습니다. ✨

2. "자료가 없다고요?" 빈손으로 나가는 유저를 붙잡는 4분기 CTA

초기에 대량의 브랜드를 등록하다 보니 데이터의 빈부격차가 심했습니다. 어떤 대기업은 미디어킷과 가이드라인이 둘 다 풍부한 반면, 어떤 브랜드는 달랑 로고 PNG 파일 하나만 겨우 구한 경우도 있었죠.

처음에는 모든 페이지에 똑같은 모양의 '다운로드' 버튼을 보여줬더니, 자료가 없는 브랜드 페이지에 들어온 유저들이 빈 화면이나 비활성화된 버튼을 보고 허무하게 이탈하는 문제가 생겼습니다. 유저의 흐름을 뚝 끊어버리는 몹쓸 경험이었습니다. 🛑

이를 해결하기 위해 데이터 확보 상태에 따라 CTA(Call to Action) 영역을 4가지 경우의 수로 정밀하게 쪼개어 유저 동선을 설계했습니다.

• 1분기: 미디어킷 ⭕ + 가이드라인 ⭕ ➔ 가장 베스트! 모든 다운로드 버튼 활성화
• 2분기: 미디어킷 ⭕ + 가이드라인 ❌ ➔ 미디어킷 중심 노출
• 3분기: 미디어킷 ❌ + 가이드라인 ⭕ ➔ 가이드라인 중심 노출
• 4분기: 둘 다 없음 ❌ ➔ 과감하게 빨간색 경고 박스를 띄우고, 유저가 바로 제보/요청할 수 있는 청 청원 동선으로 자연스럽게 연결!

자료가 없으면 없는 대로 유저가 실망하고 나가는 게 아니라, 다음 행동(요청하기)을 이어가도록 판을 짜서 락인(Lock-in) 효과를 노린 것입니다.

3. 구글 검색엔진(SEO) 봇과의 짜릿한 심리전, Soft 404 탈출기 🕵️‍♂️

사이트를 한참 런칭하고 운영하던 중, 구글 서치 콘솔에서 일부 브랜드 페이지를 'Soft 404(콘텐츠가 없는 빈 페이지)'로 분류해 검색 노출을 누락시키고 있다는 청천벽력 같은 신호를 잡았습니다.

"아니, 나름 레이아웃 꼼꼼히 잡아서 꾸민 페이지인데 왜 빈 페이지라는 거야?!" 하고 코드를 뜯어봤더니, 원인은 허무하게도 디자이너의 '솔직함'에 있었습니다. 자료가 부족한 페이지에 유저 안내용으로 적어둔 "현재 미제공 / 정보가 존재하지 않습니다" 같은 부재(absence) 키워드들을 구글 봇이 찰떡같이 긁어가서는 "음, 여기 알맹이가 없는 깡통 페이지군!" 하고 오해해 버린 것이었죠.

의미는 유지하되 구글 봇의 오해를 풀어야 했습니다. 딱딱하고 빈약해 보이는 안내 문구를 전문적인 '브랜드 정책 안내' 톤으로 세련되게 UX 라이팅을 다듬었습니다.

• ❌ 기존: "가이드라인 미제공 / 존재하지 않습니다."
• ⭕ 변경: "본 브랜드의 공식 디자인 가이드라인 및 정책에 따라..."

단어 몇 개를 디자인 가이드 톤으로 교정했을 뿐인데, 거짓말처럼 구글의 Soft 404 판정이 해소되며 검색 노출이 정상화되었습니다. UX 라이팅과 톤앤매너가 단순히 감성의 영역이 아니라, 기술적인 검색엔진 최적화(SEO)에 얼마나 다이렉트한 영향을 주는지 온몸으로 깨달은 짜릿한 순간이었습니다. 🚀

4. 폼 작성은 귀찮으니까, 2단계 아코디언으로 부담 덜어주기 📝

유저들이 "이 브랜드 로고도 추가해 주세요!"라고 요청하는 폼을 만들었는데, 처음엔 입력할 필드(브랜드명, 공식 URL, 카테고리 등)가 한 화면에 너무 많이 펼쳐져 있었습니다. 제가 유저라도 숨이 턱 막혀서 그냥 창을 닫아버렸을 겁니다.

그래서 이 요청 폼을 2단계(기본 정보 입력 ➔ 상세 정보 아코디언) 구조로 쪼갰습니다. 꼭 필요한 브랜드 이름만 먼저 적게 유도하고, 나머지 복잡한 메타데이터는 아코디언 속에 숨겨두어 선택적으로 입력하게 만들었죠.

결과는 대성공! 폼을 쪼개자마자 유저들의 데이터 요청 및 제출 전환율이 눈에 띄게 좋아졌습니다. 유저의 정신적 피로도를 낮추는 이 작은 디테일이야말로, 디자이너가 데이터 스키마 설계 단계부터 개입해야 하는 가장 강력한 이유입니다.

올리브의 한 줄 요약 💡

"디자인은 단순히 픽셀을 예쁘게 배치하는 정적인 작업이 아닙니다. 화이트 로고가 안 보이는 사용자의 맥락을 짚어내고, 구글 봇의 오해를 UX 라이팅으로 풀어내며, 유저의 피로도를 인터페이스 구조로 제어하는 것. 그 모든 동선을 설계하는 게 진정한 디자인입니다!"

이어지는 [3편]에서는 이렇게 눈부신 UX 진화 속에서... 백엔드 데이터 양이 늘어나자 한계를 느끼고 "에라 모르겠다, 노션 버리고 Supabase로 진짜 이사 가자!"를 외친 개발자 올리브의 본격 데이터베이스 엔지니어링 스토리가 이어집니다. 🛠️