에이전시 인턴 시절, 가장 많이 들었던 말은 "다은 님, 이거 좀 더 엣지있게 안 돼요?"였습니다. 그 추상적인 '엣지'를 찾기 위해 레퍼런스 사이트를 뒤지며 밤을 새웠던 기억이 납니다. 하지만 스타트업으로 넘어와 프로덕트 디자인을 하면서 상황은 180도 달라졌습니다. 개발자분들은 '엣지'를 원하지 않습니다. 그들이 원하는 건 "이거 라이브러리에 있는 건가요?"라는 질문에 대한 명확한 대답입니다. UI 디자인은 예술이 아니라 철저한 논리와 효율의 싸움이라는 것을, 저는 수많은 삽질 끝에 깨달았습니다.
특히 최근 프론트엔드 개발 생태계에서 'Shadcn UI'는 거의 표준에 가까운 위상을 차지하고 있습니다. 패키지 설치 방식이 아니라 코드를 복사해서 붙여넣고 커스터마이징 하는 방식이라 개발자들의 선호도가 엄청나게 높습니다. 그런데 우리 디자이너들은 어떤가요? 개발팀이 Shadcn을 쓴다고 하는데, 그게 뭔지도 모르고 피그마에서 사각형 툴을 잡고 픽셀을 깎고 있습니다. 이미 검증되고 접근성까지 고려된 컴포넌트가 존재하는데, 그걸 모르고 '뇌피셜'로 새로 그려서 넘겨줍니다. 이건 디자이너의 직무 유기이자, 팀 전체의 리소스를 갉아먹는 주범입니다.
그래서 오늘 소개할 도구는 단순한 검색 엔진이 아닙니다. 바로 'Shoogle'입니다. 이름에서 유추할 수 있듯이, 웹상에 흩어진 Shadcn 블록들을 찾아주는 '구글' 같은 서비스입니다. 기존에는 V0나 깃허브 저장소를 일일이 뒤져야 했지만, 이제는 검색창에 'Pricing Section'이나 'Dashboard'라고 치기만 하면 됩니다. 그러면 Shadcn 기반으로 구현된 수많은 코드 블록과 디자인 미리보기가 쏟아져 나옵니다.
이 도구가 왜 우리 같은 주니어 디자이너에게 중요할까요? 디자인을 '시작'하는 방식이 달라지기 때문입니다. 예전에는 빈 캔버스에 사각형을 그리며 시작했다면, 이제는 Shoogle에서 검색된 표준 패턴을 먼저 확인하고 시작해야 합니다. "아, 가격 정책 페이지는 보통 이런 구조로 짜여 있고, Shadcn에서는 이런 식으로 구현이 되어 있구나"를 파악한 뒤, 우리 서비스의 톤앤매너에 맞춰 스타일만 입히는 것입니다.
'망한 핸드오프'의 전형적인 사례를 하나 들어보겠습니다. 디자이너가 드롭다운 메뉴를 아주 화려하게 그렸습니다. 애니메이션도 넣고, 그림자도 3단으로 넣었죠. 개발자가 묻습니다. "이거 기존 라이브러리 컴포넌트로 구현 안 되는데요? 커스텀하려면 3일 걸립니다." 디자이너는 당황합니다. "그냥 예쁘게 만든 건데..." 결국 개발자는 야근을 하거나, 디자인을 쳐내야 합니다. 서로 감정만 상하고 결과물은 누더기가 됩니다.
반면, '개선된 핸드오프'는 이렇습니다. 디자이너가 먼저 Shoogle을 통해 개발팀이 사용 가능한 컴포넌트의 범위를 확인합니다. "Shadcn의 Select 컴포넌트 구조를 가져오되, 보더 라디우스와 컬러 값만 우리 시스템 변수로 교체해주세요."라고 말하며 피그마 시안을 넘깁니다. 개발자는 코드를 복사해오고 스타일만 수정하면 끝입니다. 3일 걸릴 일이 30분 만에 끝납니다. 이때 디자이너는 단순한 '화면 그리는 사람'이 아니라 '생산성을 설계하는 사람'이 됩니다.
물론, 남이 만든 블록을 가져다 쓰는 것에 거부감을 느끼는 분들도 있을 겁니다. "나만의 독창성은 어디 갔지?"라고 반문할 수도 있습니다. 하지만 쏘카에서 일하며 뼈저리게 느낀 건, 독창성은 버튼 모양이나 인풋 박스의 테두리 두께에서 나오는 게 아니라는 사실입니다. 사용자가 겪는 문제를 해결하는 '흐름'과 '경험'에서 독창성이 나옵니다. 뻔한 UI 구성요소는 뻔하게(표준에 맞게) 만들고, 정말 중요한 문제 해결에 시간을 쏟으세요.
Shoogle 같은 도구는 개발자만을 위한 것이 아닙니다. 오히려 개발 구조를 이해하고 논리적인 디자인을 하려는 디자이너에게 더 강력한 무기입니다. 지금 당장 즐겨찾기에 추가해두세요. 그리고 다음에 기획서 없이 구두로 화면을 그려달라는 요청이 들어오면, 빈 화면을 멍하니 바라보는 대신 검색창을 켜보시기 바랍니다. 우리의 퇴근 시간은 소중하고, 1px의 오차보다 더 중요한 건 '구현 가능한 디자인'이니까요.
