코덱스로 업무 대시보드 만드는 프롬프트 매뉴얼

완성 화면부터 확인한다

가상 업무 6건을 담은 조회용 대시보드를 Codex로 만들었다. 완성 HTML을 브라우저에서 열면 전체·완료·지연 건수와 업무 카드가 나타난다. 서버를 설치하거나 로그인하지 않아도 된다.

기준일은 2026년 10월 10일로 고정했다. 이미 완료된 업무는 마감일이 지났어도 지연에 넣지 않았고, 오늘이 마감인 업무도 아직 지연으로 세지 않았다.

1. 화면보다 계산 기준을 먼저 정한다

이번 입력은 tasks.json이다. 업무 ID, 업무명, 담당자, 상태, 마감일을 각 업무에 넣었다. 엑셀이나 CSV로 시작해도 같은 정보가 있으면 변환을 요청할 수 있다.

지연은 단순히 ‘마감일이 지난 모든 업무’가 아니다. 완료된 업무까지 더하면 업무 현황이 실제보다 나빠 보인다. 기준일을 사용자의 현재 시각으로 계산할지 보고서 날짜로 고정할지도 결정해야 한다. 예제는 같은 자료를 언제 열어도 같은 검사 결과를 보여주도록 날짜를 고정했다.

국내 Codex 대시보드 제작 사례에는 실제로 사용한 뒤 기능 범위를 바꾸고 기기 간 저장·동기화를 확인한 과정이 있다. 이번 파일은 동기화 없이 업무를 조회하는 용도다. 조회 화면을 만드는 작업과 여러 사람이 함께 수정하는 서비스를 만드는 작업을 구분한다. 영업 대시보드 제작 사례

2. 서버 없이 쓸 결과물을 요청한다

tasks.json으로 브라우저에서 바로 열 수 있는 단일 dashboard.html을 만들어라.
기준일은 [보고 기준일]이다.
전체·완료·미완료 지연 건수를 위에 표시해라.
지연은 기준일보다 마감일이 이르고 완료가 아닌 업무다.
기준일 당일 마감은 지연으로 세지 마라.

전체·진행·대기·완료·지연 필터와 담당자 필터를 함께 제공해라.
조건에 맞는 업무가 없으면 빈 화면 대신 안내를 표시해라.
서버·로그인·외부 API·외부 폰트 없이 동작해야 한다.
업무명에 HTML 태그가 들어 있어도 그대로 글자로 표시해라.
390px 모바일 폭에서 가로로 넘치지 않게 만들어라.

파일 생성 시점의 조회용 스냅샷임을 화면에 표시해라.
저장·실시간 동기화 기능이 있는 것처럼 쓰지 마라.
output/dashboard.html에 저장하고 건수·필터·모바일 폭을 검사해라.

차트를 먼저 추가하기보다 전체 건수와 상태 필터를 먼저 만든다. 오늘 확인하려는 질문이 ‘늦은 업무가 무엇인가’라면 복잡한 그래프보다 담당자별 지연 목록이 바로 답을 준다.

3. 두 필터를 함께 적용해 본다

처음 열면 업무 6개가 보인다. 상태에서 ‘지연’을 고르면 2개가 남는다. 여기에 ‘담당 A’를 선택하면 ‘견적 회신’ 1개만 남는다. 같은 지연 상태에서 ‘담당 C’를 선택하면 결과가 없다는 안내가 나타난다.

필터 둘을 각각 시험하는 것만으로 충분하지 않다. 상태와 담당자 조건이 함께 적용되는지 확인한다. 다음 요청으로 검사를 맡길 수 있다.

화면을 실제 브라우저에서 열어라.
전체 상태는 6건, 지연은 2건이어야 한다.
지연+담당 A는 W04 한 건, 지연+담당 C는 0건이어야 한다.
0건일 때 안내가 보이는지 확인해라.
390px와 1280px 폭에서 가로 넘침을 검사하고 화면을 캡처해라.

이번 예제는 두 폭에서 필터와 조건에 맞는 업무가 없을 때의 안내를 검사했다. 브라우저 검사 결과에 건수와 실제 페이지 폭을 남겼다. 화면 파일은 모바일과 데스크톱으로 나눴다.

4. 업무명에 HTML 태그가 있어도 글자로 표시한다

샘플에는 HTML 태그처럼 보이는 업무명을 한 건 넣었다. 문자열 안에 <img ...>가 있어도 이미지나 명령으로 실행하지 않고 그대로 글자로 보여주게 했다. 표시 코드는 데이터를 textContent로 넣는다.

브라우저 검사에서는 카드 안에 이 문자열로 생성된 이미지가 없는지 확인했다. 단순 표시 화면도 외부에서 들어온 문자열을 HTML로 삽입하면 예상하지 못한 동작을 만들 수 있다. 예쁜 화면뿐 아니라 어떤 값을 입력받아 어떻게 표시하는지도 요청문에 포함한다.

5. 수정·저장·공유의 범위를 분명히 한다

단일 HTML은 자료를 파일 안에 담아 전달하는 방식이다. 원본 JSON을 수정해도 이미 생성한 HTML이 알아서 바뀌지는 않는다. 새 자료로 다시 생성해야 한다. 이번 예제는 원본을 바꾸지 않고 조회만 하는 화면이다.

회사 업무를 넣은 HTML은 그 업무 목록이 들어 있는 파일이다. 인터넷에 올리지 않았다는 이유만으로 비밀 자료를 누구에게나 공유해도 되는 것은 아니다. 전달할 대상과 포함할 필드를 정한다.

첫 대시보드는 한 질문에 답하면 된다

이번 화면은 ‘누가 어떤 지연 업무를 가지고 있는가’에 답한다. 저장·알림·로그인 기능까지 한 번에 붙이지 않았다. 먼저 건수와 조건이 맞는지 확인한 뒤, 실제로 필요한 다음 기능을 정한다.

코덱스로 대시보드를 만드는 프롬프트에는 디자인 취향만 적지 않는다. 업무 데이터, 숫자의 정의, 사용자가 할 조작, 저장 범위, 실제 검사 조건을 넣는다.