VibeAZ찾고, 직접 해보고, 경험을 나누는 바이브코딩 A to Z

직접 실행 · 자체 예제

표의 숫자를 막대그래프로 보여주기

연습 파일에서 표와 막대그래프를 확인했습니다. 사과 2개, 배 5개, 귤 3개가 그래프에 2:5:3 비율로 표시됐습니다.

VibeAZ 편집실 · 확인일 2026-11-09

연습 파일에서 표와 막대그래프를 확인했습니다. 사과 2개, 배 5개, 귤 3개가 그래프에 2:5:3 비율로 표시됐습니다.

1. 빈 연습 폴더를 코딩 에이전트에서 열고 아래 요청문을 보냅니다. 먼저 예제의 세 수치 그대로 시작합니다. 2. 완성된 HTML 파일을 브라우저로 엽니다. 파일 위치와 여는 방법은 에이전트에게 물어보세요. 3. 표는 사과 2·배 5·귤 3이고, 막대는 배 > 귤 > 사과 순서인지 비교합니다. 확인 뒤 과일 이름과 개수를 바꿔 달라고 요청합니다.

사과 2개, 배 5개, 귤 3개를 표와 막대그림으로 비교하는 연습 페이지를 만들어줘. 세 이름과 숫자를 표에서 읽을 수 있어야 하고, 막대 길이는 숫자의 크기 순서에 맞아야 해. 색을 구별하지 못해도 항목 이름과 숫자를 볼 수 있게 해줘. 나는 코딩을 처음 해. 어려운 말은 짧게 풀어 설명하고, 먼저 현재 상황을 확인한 뒤 요청한 범위만 진행해줘. 확인할 수 없는 내용은 추측하지 말고 알려줘. 내 실제 데이터나 비밀값을 사용하지 말고, 새 유료 서비스나 외부 API를 추가하지 마. 작업을 마치면 내가 직접 확인할 순서와 실행하지 못한 부분을 나누어 알려줘.

표에 사과 2개, 배 5개, 귤 3개가 정확히 나타났습니다. 세 막대 폭은 약 297.6px, 744px, 446.4px로 2:5:3 비율이었습니다. 이름과 개수는 색을 구분하지 않아도 텍스트로 읽힙니다. 390px에서 가로 넘침 없이 표와 그래프가 표시됐습니다.

막대 순서나 표 숫자가 다르면 원래 수치를 기준으로 고치고 세 항목을 각각 다시 확인해줘.

요청 조건을 읽고 제작·검사한 예제입니다. 문장만 넣은 독립적인 1회 생성 실험은 아닙니다. VibeAZ 자체 제작 · 확인한 예제 파일과 환경에서의 결과입니다. VibeAZ가 만든 연습 파일을 Codex 앱과 Chromium에서 확인했습니다. 다른 모델·브라우저의 같은 결과나 요금제는 확인하지 않았습니다. 추가 유료 서비스와 외부 API는 사용하지 않았습니다. 코딩 에이전트 이용료는 각자의 계정 조건에 따릅니다.

표의 숫자를 막대그래프로 보여주기 프롬프트 초보자 따라하기