Impeccable로 사이트 리디자인하기
Impeccable이 뭐여?
이걸 플러그인이라고 해야 되나, 서비스라고 해야 될지 모르겠지만... 서비스의 디자인을 확인하고 크리틱해주고 대안을 만들어주고 이런 걸 해주는 건데 사실 나온 지는 좀 됐다. 휴직하기 전에 써봤었고, 그때는 테스트로 여러 가지 해보고 “아, LLM으로 만들었어요”라는 표시를 많이 걷어내주긴 하지만 한계가 뚜렷한 툴이기도 했다. 뭐, 그때 당시 모델이 그렇게 똑똑하지 않았던 이슈도 있을 것 같긴 하지만.
아직 사람들이 많이 쓰는 것 같고, 그동안 얼마나 바뀌었을지 테스트해 보려고 일단 만들어서 쓰고 있는 서비스 중에서 하나를 골랐다.
위에로 링크 걸어두긴 했는데 여기 눌러서 가면 설치법이랑 뭐 이런거 다 있다.
그리고 나는 이번에 전체 디자인을 바꾸려는 리디자인 용도로 이걸 쓰긴 했는데, 디자인에 이슈가 없는지 확인하는 용도나, 일부분만 바꾸는 용도 등 사용하는 방법은 꽤나 다양할 수 있다.
투자일지
대상이 된 건 투자일지 앱이다. 이것저것 테스트 베드로 많이 쓰는 것 같다. 디자인 시스템을 처음 적용한 것도 여기였고, 뭐 크게 특별한 짓 안 하고 디자인에 신경 쓰기보다는 그냥 기능이 굴러가는 데 초점을 두고 계속해서 작업을 해왔다.
최근에 했던 작업으로는, 서비스 backend를 supabase를 쓰다가 무료 프로젝트 한도가 차서 그냥 “에라 모르겠다” 하고 pro tier에 25달러를 내느니 AWS에 7달러를 내자고 생각했다. 그래서 라이트세일에 인스턴스 하나 만들어두고 DB를 옮겨둔 상태다. Backend 단에서는 그렇게 작업을 하고 있었고, Frontend 디자인을 이번에 바꿔보려고 했다.
프롬프트
특별한 걸 쓰진 않았다. 그냥 스킬 호출하고 하려고 하는 내용만 간단히 적었다.
/impeccable 스킬을 써서 이 프로젝트의 디자인을 바꿔보면 좋겠어. 세 가지 정도 안을 만들어 주면 좋을 것 같은데, 하나는 디자인 시스템을 유지하고 나머지 아이디어들은 디자인 시스템을 벗어나도 괜찮아. 앱 코드에는 손을 대지 말고, 프로토타입 형태로 제안을 정리해 주면 좋겠어.
이 정도? 그러고 나온 애들이...
어라?
‘어?’라고 느낀 건 생각보다 쓸만해서였다. 물론 이제 디테일을 파고들면 그대로 못 쓸 부분이나 바꿔야 되는 부분들이 많긴 한데, 정보 구성, 특히 요소를 활용하고 제시하는 측면에서는 굉장히 뛰어나다고 느꼈다.
나도 나름 이 서비스랄까, 혼자 쓰는 거지만 붙잡고 1년이 넘게 지금 이것저것 테스트를 해보고 있는 과정이었는데, 생각지도 못했던 제안들이 있어가지고 꽤나 신선하게 받아들였다. 그래서 아, 이 정도면 실제 서비스에 적용해보는 작업을 진행해도 되겠다는 생각이 들었다.
물론 이거를 실제 작업으로, 깃허브의 이슈로 나눠가지고 작성하는 거는 Claude한테 시켰지만 말잊.
왜 B였냐면..
뭐 특별한 이유가 있었던 건 아니었다. 지금 시점에 다른 서비스나 내가 눈여겨보던 것들과 달랐다는 게 하나 있었고, 증권 서비스들을 많이 보다 보면 저렇게 빼곡하게 데이터를 몰아넣는 경우가 있었는데, 그걸 한번 테스트해 보자는 생각도 있었다. 아, 그리고 저 다크 모드 화면을 그대로 가져갈 생각은 없었다. (결과물을 보면 알겠지만 말이죠.)
비교
노트 탭이 가장 특징이 잘 드러나는 부분이라고 생각해서 가져왔다. 예전에는 사실 전체 폭을 쓰는 리스트 하나가 둥그러니 있고, 누르면 안으로 안으로 들어가는 전통적인 구조였다면, 내비게이션 자체는 모바일과 다르지도 않았다.
개편 후에는 화면을 세 컬럼으로 나눠 쓴다. 왼쪽에서 종목을 고르고, 중간에서 노트를 고르고, 오른쪽 패널에 실제 노트 전문이 나오는 구성이다. 데스크톱에서는 확실히 정보를 탐색하기가 좋아졌다고 느낀다.
다만 한 가지 이슈는 모바일에서 저 구조를 그대로 사용하고 있었다는 점인데, 전통적인 방식으로 뎁스를 타고 들어가도록 고쳤다. 데스크톱 구조를 그대로 위아래로 펼쳐놓은 구조라 절대 쓸 수 없는 상태였어서..
B안이랑 다른데?
달라 보이는 건 라이트 모드를 기본으로 가져가서 그렇다. 이건 내 취향인데 다크 모드를 거의 안 쓴다. 거의라고 할 필요도 없다. 그냥 안 쓴다.
다크 모드에 최적화된 화면들을 보면 눈이 침침해지는 느낌이 나서... 이제 슬슬 노안이 올 나이기도 하고 말이지. 라이트 모드를 쓰고 있다. 그래서 레이아웃은 마음에 드니까 라이트 모드로 적용.
이미 디자인 시스템에서 컬러는 토큰화 해놔서 크게 이 부분은 품이 들진 않았다. 그리고 자산 탭에서 딱 하나 시현이랑 다른 거는 저 트리맵을 그대로 살려놨다는 거. 대신 트리맵은 초기에는 이제 접어두는 정도로 타협을 봤다.
마무리하자면...
LLM으로 작업한 프로젝트들에서 디자인 퀄리티를 어떻게 끌어올릴까, 어떻게 하면 덜 이상하게 만들까는 계속 반복되는 이슈랄까, 화두인데.. 거기에 직접적으로 도움을 줄 수 있는 툴이라고 생각한다. 물론 이것도 만병통치약은 아니고, 이번에 진행할 때도 전체 사이트에 적용하는 것 자체는 두 시간 정도? 얼마 걸리지 않았는데 그걸 실제 써보면서 디테일하게 그 세부에서 튀는 부분을 잡는 게 시간이 꽤 오래 걸렸다.
그래서 뭐 LLM 관련 글에서 항상 쓰는 얘기지만, 정신 똑바로 차리고 잘 지켜봐야지 이상한 부분이 없어질거다.