Intro: 왜 하필 '로고착착'이었을까?

디자이너로 일하다 보면 하루에도 몇 번씩 이런 슬픈 숨바꼭질을 마주하곤 합니다.

"올리브님, 이번 신규 프로젝트 기획서에 들어갈 구글/카카오 공식 로고 가이드라인 어디 있나요?" "아, 그게 해당 기업 브랜드 사이트 깊숙이 숨어있거나... 예전에 누가 다운로드해 둔 알집 파일이 슬랙 어딘가에 돌 텐데... 잠시만요~ (뒤적뒤적)"

웹서핑을 하다가 마음에 드는 폰트가 있으면 우리는 자연스럽게 대안 서체와 허용 범위를 한눈에 보여주는 '눈누'를 찾아갑니다. UI/UX 레퍼런스가 필요할 땐 '핀터레스트'나 '디비컷' 같은 훌륭한 아카이빙 플랫폼들이 차고 넘치죠.

그런데 왜! 실무에서 폰트만큼이나 매일같이 쓰이는 기업 브랜드 로고나 가이드라인(CI/BI)은 맨날 대기업 홈페이지 대문 구석탱이에 꼭꼭 처박혀 있거나, 정체불명의 개인 블로그를 떠돌아다녀야 하는 걸까요? 😭 심지어 어렵게 구한 파일이 구버전 로고여서 식은땀을 흘리는 일도 부지기수였습니다.

참다못한 저는 생각했습니다. "답답한 사람이 우물 판다. 실무자들을 위한 브랜드 가이드라인 허브가 세상에 없다면, 그냥 내가 직접 하나 만들자!"

그렇게 기업 브랜드 아이덴티티 자산을 한곳에 모아 단 1초 만에 검색하고 안전하게 다운로드할 수 있는 플랫폼, '로고착착(logochakchak.site)' 프로젝트의 서막이 올랐습니다.

---

🛠️ 디자인 툴을 넘어, 내 무기는 'Vibe Coding'

저는 UI/UX 디자인과 프론트엔드/백엔드 개발의 경계를 자유롭게 넘나드는 디자인 엔지니어(Design Engineer)입니다.

보통의 사이드 프로젝트라면 Figma를 켜고 며칠 동안 사각형을 그리고, 픽셀 단위로 마진을 조정하며 '화면 설계'부터 시작했을 겁니다. 하지만 저는 이번 프로젝트를 시작할 때, 디자인 툴을 켜는 대신 곧바로 터미널을 열고 에디터를 켰습니다.

머릿속에 맴도는 인터페이스와 사용자 경험을 스케치북이 아닌, 실제 동작하는 코드로 직접 구현하며 화면을 다듬어 나가는 저만의 작업 방식—일명 'Vibe Coding(바이브 코딩)'을 선택한 것이죠! 🎸

[ 전통적인 프로세스 ]  Figma 디자인 ──> 기획서 작성 ──> 개발 구현 (느림 😴)
[ 바이브코딩 ]       아이디어 캐치 ──> 코드 기반 UI 컴포넌트 실시간 빌드 (초고속 ⚡)

Figma에서 아무리 정교하게 프로토타입을 만들어도, 실제 브라우저에서 렌더링 될 때의 느낌, 스크롤의 부드러움, 반응형 브레이크 포인트에서 오는 미세한 어색함까지 완벽하게 예측하긴 어렵습니다.

저는 Next.js 15(App Router)와 React 19, Supabase, 그리고 따끈따끈한 Tailwind v4라는 나름 트렌디하고 강력한 풀스택 기술 스택을 내 손으로 직접 얹었습니다.

디자이너로서 인터페이스의 심미성을 치열하게 고민하는 동시에, 개발자로서 컴포넌트의 구조와 데이터 흐름을 동시에 설계해 나갔습니다. 화면을 '그리는 것'과 '만드는 것'이 완벽하게 싱크로율 100%로 맞아떨어지는 이 짜릿한 카타르시스가 참 좋아요. 😣

덕분에 아이디어가 세상 밖으로 튀어나온 지 단 이틀 만에, 실제 작동하는 완벽한 웹 서비스의 뼈대와 핵심 뷰어 구조를 뚝딱 완성해 낼 수 있었습니다.

---

올리브의 한 줄 요약 💡

"가장 완벽한 디자인 툴은 때론 '동작하는 코드' 그 자체일 수 있습니다. 아이디어를 프로덕트화하는 속도를 극대화하는 것, 그것이 디자인 엔지니어가 가진 가장 강력한 무기입니다."

이어지는 [2편]에서는 코드를 쥐어잡은 디자이너가 화면 속 픽셀의 디테일과 유저 유입 동선을 어떻게 집요하게 깎아 나갔는지, 본격적인 UX 고군분투기를 소개해 드릴게요! 🎨