클릭 한 번과 드래그로 '어떤 TV를 살지' 알려주는 추천 툴을 만들었습니다.
I created a TV recommendation tool that answers “what TV should I buy?” with one click and a drag
핵심 요약
성능, 크기, 가격 간의 트레이드오프를 직관적인 UI로 해결해주는 TV 추천 도구 'BuyAngle' 개발기.
- Vibe coding 활용 — 아이디어를 빠르게 프로토타입으로 구현하고 즉각적인 피드백을 통해 수정함.
- 트레이드오프 UI — 성능, 크기, 가격 간의 복잡한 선택지를 드래그 인터페이스로 직관화함.
- 데이터 신뢰성 — AI 생성 데이터가 아닌 신뢰할 수 있는 외부 소스의 데이터를 기반으로 점수를 산출함.
- UX의 중요성 — 프로토타입은 빠르게 만들 수 있지만, 결국 '좋은' 제품을 만드는 건 세부적인 UX 완성도임.
저는 이걸 BuyAngle이라고 부릅니다. 몇 년 전에 제가 만들었던 제품 추천 사이트 SimplyBuy의 스핀오프 버전이죠.
모든 TV 구매는 기본적으로 성능, 크기, 가격 사이의 트레이드오프라는 점에 착안했습니다. 이 세 가지를 모두 극대화할 수는 없으니까요. 그래서 그 트레이드오프를 직관적으로 느끼게 하고, 사용자의 선호도를 즉시 TV 추천으로 바꿔주는 인터랙티브 UI를 만들었습니다.
개발하면서 배운 몇 가지 점들입니다:
-
Vibe coding의 가장 좋은 점은 시간을 낭비하지 않고 새로운 아이디어를 빠르게 테스트할 수 있다는 것이었습니다. 레이아웃을 개선하고, 점수 산정 방식을 조정하고, 라벨을 바꾸면서 무엇이 적절한지 거의 즉시 확인할 수 있었죠.
-
또한 아이디어를 판단하는 방식도 바뀌었습니다. 이론상으로 아이디어가 괜찮은지 고민하는 대신, 실제로 사용해보고 어디가 혼란스러운지 느끼며 계속 조정해 나갈 수 있었습니다.
-
초기 버전은 빠르게 완성되었지만, 진짜 작업은 세부 사항을 다듬는 것이었습니다. Vibe coding을 쓰면 프로토타입은 빨리 만들 수 있지만, '좋은' 것이 무엇인지에 대해 의도를 가지고 명확한 비전을 세워 UI/UX를 개선해야 합니다.
아직 알고리즘을 조정 중이지만, 이게 '어떤 TV를 사야 할까?'라는 질문에 답하는 가장 직관적인 방법 중 하나가 될 것이라고 진심으로 생각합니다.
