코피야

조이의 AI 작업 매뉴얼
← 이전
📊 HOW

HTML 대시보드 만들기

회사 대시보드처럼 데이터 연결 전 화면부터 빠르게 확정할 때 쓰는 순서.

1만들고 싶은 대시보드를 한 문장으로 설명
왜 이 단계?
목적과 보는 사람이 먼저 정해져야 카드/차트가 엉뚱하게 안 나와요.
  • 누가 보는지 정하기: 대표/팀장/실무자
  • 화면에서 바로 보고 싶은 것 3~5개 적기
  • 실제 데이터는 아직 안 넣어도 됨
실제로 이렇게 하면 돼
  1. ChatGPT(코피)를 연다.
  2. “회사에서 사용할 대시보드를 만들고 싶어”처럼 목적을 먼저 적는다.
  3. 대표/팀장/실무자 중 누가 볼 화면인지 적는다.
  4. 꼭 보고 싶은 지표를 3~5개만 먼저 적는다.
  5. 아직 컬럼이나 데이터가 정확하지 않으면 ‘모르겠어, 추천해줘’라고 적어도 된다.
  6. 코피가 제안한 구성 중 필요한 것만 남기고 다음 단계로 간다.
코피/Claude에게 이렇게 말하기
회사에서 사용할 대시보드를 만들고 싶어. [목적] - [보는 사람] 대표님 / 팀장님 / 실무자 [한눈에 보고 싶은 것] - - - 먼저 필요한 화면 구성과 핵심 지표를 제안해줘.
2HTML 목업 받기
왜 이 단계?
실제 데이터 연결 전에 배치와 디자인을 고치면 수정 비용이 훨씬 작아요.
  • 임의 숫자 사용
  • 카드/도넛/추이/표를 실제처럼 배치
  • 모바일 또는 PC 기준 명시
실제로 이렇게 하면 돼
  1. 코피에게 ‘실제 데이터 연결 전에 HTML 목업부터’라고 요청한다.
  2. 숫자는 임의값을 사용하게 한다.
  3. 카드, 도넛, 추이, 비교표가 한 화면에서 어떻게 보이는지 확인한다.
  4. 모바일용인지 PC 전체화면용인지 반드시 말한다.
  5. 마음에 안 드는 부분은 기능이 아니라 디자인만 먼저 수정한다.
  6. 화면이 마음에 들 때까지 실제 데이터 연결은 하지 않는다.
코피/Claude에게 이렇게 말하기
실제 데이터 연결 전에 HTML 목업부터 만들어줘. 임의 숫자를 넣어서 실제 화면처럼 보이게 해줘. 지금은 데이터 연결보다 카드 배치, 차트 구성, 필터 위치를 먼저 확정하고 싶어.
3디자인 수정
왜 이 단계?
기능과 데이터까지 같이 건드리면 오류가 섞이기 쉬워요.
  • 전체 디자인 유지 여부 명시
  • 수정 영역만 정확히 지정
  • 다른 메뉴는 변경 금지
실제로 이렇게 하면 돼
  1. 수정할 화면을 한 군데씩 지정한다.
  2. ‘전체 디자인은 유지’ 문장을 꼭 넣는다.
  3. 카드 크기, 배치, 글씨, 색, 차트 위치 중 무엇을 바꿀지 적는다.
  4. 수정 후 다른 메뉴가 바뀌지 않았는지 확인한다.
  5. 필요하면 다시 수정 프롬프트를 보내고 목업을 확정한다.
코피/Claude에게 이렇게 말하기
기존 HTML 대시보드의 전체 디자인은 유지하고 아래 부분만 수정해줘. [수정 영역] - [수정 내용] - [절대 변경 금지] - 다른 메뉴 - 기존 카드 구조 - 기존 필터 구조
4최종 HTML 확정
왜 이 단계?
이 단계까지 디자인만 확정해두면 데이터 연결이 쉬워져요.
  • 화면 흐름 마지막 확인
  • 필터/펼치기/탭 동작 확인
  • 실제 데이터 연결 준비
실제로 이렇게 하면 돼
  1. 목업이 확정되면 ‘이 디자인을 최종안으로 쓸게’라고 말한다.
  2. 탭, 필터, 펼치기 버튼 등이 실제로 눌리는지 확인한다.
  3. 실제 데이터 연결 전에 화면 깨짐이나 겹침이 없는지 본다.
  4. 이제 Python 또는 실제 데이터 연결 단계로 넘어간다.
코피/Claude에게 이렇게 말하기
지금 디자인을 최종안으로 사용할게. 전체 구조는 유지하고 버튼, 필터, 펼치기 등 화면 동작만 점검해줘. 실제 데이터 연결 전 최종 HTML로 정리해줘.
조이 작업 팁
조이 방식에서는 ‘데이터 연결 전에 HTML 목업 확정’이 가장 중요해. 디자인을 먼저 잡고 데이터는 나중에.
예전에 어떻게 했는지 헷갈릴 때 이 순서대로 따라가면 돼.