바이브 코딩으로 만든 대시보드가 형편없어 보이는 10가지 이유

AI에 “보기 좋은 대화형 대시보드”를 요청하면 차트와 필터는 만들어주지만, 사용자가 무엇을 찾고 어디부터 봐야 하는지까지 정리해주지는 못함 월드컵 데이터로 만든 대시보드는 명확한 질문이나 탐색 흐름 없이 정보를 나열하고 모든 요소를 비슷하게 강조해, 중요한 내용을 고르는 일을 사용자에게 떠넘김 차트가 깔끔해도 축의 의미를 찾기 어렵거나 핵심 수치가 숫자로만 묻혀 있으면 비교하기 어려우며, 모든 데이터를 담는 것과 읽기 쉽게 보여주는 것은 다름 같은 정보를 반복하고 색상, 글자 크기, 여백을 제각각 쓰면 풍성해 보일 수는 있어도, 무엇이 중요하고 서로 어떻게 연결되는지 전달하기 어려움 좋은 디자인은 장식을 더하는 것이 아니라 사용자를 대신해 정보를 정리하고 이해에 드는 수고를 줄이는 일이며, 사람들이 무엇을 필요로 하고 원하는지 파악하는 데서 출발함 실험: CSV에서 대시보드 만들기 Claude Code(Opus 5) 에 경기장, 기온, 고도, 베팅 배당률을 포함한 2026 월드컵 결과 CSV를 제공함 요청은 “CSV 데이터를 탐색할 수 있는 시각적으로 매력적인 대화형 대시보드를 만들어 달라”는 것이었으며, 결과물에서 기본적인 바이브 코딩 대시보드의 시각적 문제 10가지를 확인함 1. 사용자 여정이 없음 페이지는 명확한 동기나 질문 없이 긴 화면에 데이터, 그래프, 필터 옵션을 쌓아 놓음 AI가 일부 그래프를 위에 놓고 특정 비교를 기본으로 강조했지만, 그 배치에 논리가 없어 무엇을 볼지 판단하는 일을 사용자에게 떠넘김 2. 시각적 위계가 없음 주요 시각 요소 6개가 모두 같은 테두리 두께, 배경색, 대비를 사용함 어디에 시선을 집중해야 하는지 알려주는 시각적 위계가 없어 정보에 압도되는 느낌을 더함 3. 대표 그래프가 공간을 낭비함 첫 화면의 큰 부분을 기온과 고도의 관계를 나타내는 산점도가 차지함 데이터 분포 때문에 그래프 안에 빈 공간이 많이 생겨, 사용자의 주의를 끌어야 할 첫 화면의 핵심 영역을 제대로 활용하지 못함 4. 주요 표에 데이터를 쏟아 넣음 페이지 아래쪽 표는 모든 데이터를 담고 정렬 기능도 제공하지만, 모든 값이 있다는 것과 읽기 쉽다는 것은 다름 표 일부가 화면에서 잘리고, 사용자는 필요한 정보를 찾기 위해 많은 수고를 해야 함 5. 그래프 레이블이 직관적이지 않음 경기장별 차트에는 x축 레이블이 없어 0~9라는 눈금이 무엇을 뜻하는지 바로 알 수 없음 위쪽의 “venue workload...