바이브코딩 개발 일지 2 — 디자인 디테일

AI가 다 해주지 않더라

웹사이트 만들면서 제일 어려웠던 부분이 디자인이다. 요즘 AI로만 디자인했다고 올라오는 멋진 웹사이트 사례도 많은데, 구라가 상당히 섞여 있다고 본다. 피그마 같은 툴에서 직접 마우스 클릭하면서 조정하지 않았다뿐이지, 결국 디테일은 사람이 다 잡고, AI에게 글로 전달했을 거다. 큰 레이아웃이나 콘텐츠 배치에 대해서 기초공사를 해주는 부분은 상당히 편리하지만, AI가 혼자서 우리가 보던 멋있는 웹사이트를 만들어주지는 않는다. 결국은 사람이 독창적인 요소를 고민하고, 요소 하나하나를 짚어서 구체적인 방향을 제시해야 한다. 이때, 디자인 툴을 다뤄본 경험이 있다면, ‘이 버튼을 **방식으로 디자인해라’라는 식으로 특정한 기술이나 레퍼런스를 그대로 적용할 수 있을 거다. 근데 나는 디자인이라는 걸 해본 적이 없으니, 당장 고치고 싶은 요소를 뭐라고 지칭하는지도 모르겠고, 뭐 때문에 내 디자인은 구린지 하여튼 고심이 아주 많았다. 그러다 그냥 포기했다. 그래도 지금은 초기보다 많이 보기 좋아졌다. 이제는 그냥 내 맘 내키는 대로 수정한다. 그중 나름 신경 쓴 부분들을 소개해본다.

대표적인 게, Core 모델 분석 결과 화면에서 볼 수 있는, 이 회전하는 카드. Core 모델에서 귀여운 요약 카드를 제공하는 게 이 서비스의 훅인데, 공유하기 버튼을 눌러야만 이 카드가 등장하니 아무도 몰라줄 것 같았다. 그래서 공유하기 버튼 옆에 이 미니어처 카드를 배치했다. 이 회전하는 카드에도 나름 디테일이 있는데, 회전 속도에 완급을 줘서, 뒷면 구간에서는 빠르게, 앞면이 보일 때는 천천히 회전한다. 덕분에 카드 앞면은 더 오래 보이고, 도는 모습도 한결 자연스럽다. 디자인 영역에서 이런 디테일한 개선안은 클로드랑 아무리 대화를 나눠도 제시해주지 않는다.

등속 회전

속도 완급

클로드로 만들어진 웹사이트 특징이 있는데, 바로 아이콘이다. 구체적인 프롬프트 없이 클로드로 새로운 페이지나 항목을 만들면 반드시 이 아이콘이 등장한다. 요즘 등장하는 많은 바이브코딩 웹사이트나 앱에서 볼 수 있다. 이 아이콘을 어떻게든 바꿔보기 위해 온갖 주문을 해봤지만, 큰 틀에서 이 스타일을 벗어나지를 못한다. 그래서 결국에는 Midjourney로 아예 아이콘을 생성했다. 이렇게 킥이 되는 요소를 하나 배치하니, AI 스타일이 많이 사라지는 것을 확인할 수 있다.

Before

After

결과 요약 카드에서도 결국은 사람 손이 필요했다. 처음에는 요즘 피그마 광고처럼 감각적인 스타일로 만들고 싶었는데, 역시 그 정도로 높은 디자인 퀄리티를 위해서는 전문가가 필요하다. 결국은 클로드가 가능한 여러 가지 옵션을 제시하면, 거기서 방향을 선택하고, 세부 값만 내가 조정하는 형식으로 타협했다. 그중에는 노이즈 효과로 카드에 질감을 준 것이 꽤 괜찮은 방향이었다. 전반적으로 완성도가 높아보이진 않지만, Midjourney로 개성 있는 이미지를 잘 만들어 넣으니, 그래도 봐줄만한 정도의 공유 카드가 되었다. 다만, 노이즈 효과나 이미지가 웹용으로는 용량이 꽤 커서, 카드를 띄울 때 로드 시간이 꽤 길어졌다. 디자인에 대해 이야기하던 세션에서는 또 이런 부분을 신경 써주지 않으니, 결국은 사람이 웹 경험에서 생기는 불편함을 하나하나 까탈스럽게 캐치하는 것이 또 중요한 부분이겠다.