코덱스(Codex)에 필요한 업무를 설명하고, 안내에 따라 영업 업무 대시보드를 만들었습니다. 코드 작성과 수정은 코덱스가 맡았고, 저는 기능을 고르고 직접 써봤습니다. 2026년 10월 7일, 동기화 확인 간격을 20초에서 3초로 줄이는 개선까지 진행했습니다.
처음 만드는 앱이라 코덱스에 한 단계씩 안내해달라고 요청했습니다. 결과를 직접 열어보고, 기대와 다른 기능을 빼고, 휴대폰에서도 사용하는 단계까지 하나씩 확인했습니다.
코덱스 안내를 따라 첫 앱 만들기
영업지원 업무에서 반복하는 일을 놓치지 않도록, 오늘 할 일과 완료 기록을 보여주는 앱을 만들고 싶었습니다. 코드를 직접 작성하는 대신 필요한 일을 설명하고, 코덱스가 만들어준 화면을 사용하며 수정할 점을 이야기했습니다.
학습허브와 실제 업무 앱의 역할도 작업하면서 구분했습니다. 학습허브는 배운 내용과 프로젝트를 소개하는 공간이고, 업무 대시보드는 제가 직접 쓰는 별도 앱입니다. PRD는 만들 기능을 정리한 계획 이고, MVP는 핵심 기능부터 실제로 써볼 수 있는 첫 버전이라는 설명을 제 작업에 맞춰 들었습니다.
진행 방식은 단순했습니다. 코덱스가 다음 행동을 안내하면 제가 화면을 열고 버튼을 눌렀습니다. 결과가 보이는지 알려주고, 잘 안 되거나 원하는 것과 다르면 다시 요청했습니다. 코드 작성과 오류 수정은 코덱스에 맡겼습니다.
한국어로 된 웹사이트의 홈페이지
▲ 오늘 할 일과 완료 기록을 확인하던 실제 화면입니다. 체크 상태는 동기화 테스트 당시 상태입니다.
코덱스에 반복 업무부터 설명했어요
영업일에는 전략구매 리스트를 가장 먼저 올려야 합니다. 중고차 딜러에게 문자를 보내고 관리하는 카톡방마다 홍보글도 게시합니다. 중요한 공지가 생기면 전달하고, 매달 첫 영업일에는 목표를 제출해야 합니다.
처음부터 카톡방마다 무엇을 올렸는지 기록하면 복잡해질 것 같았습니다. 저는 필요한 모든 곳에 전달한 뒤 업무 종류별로 한 번 체크하는 방식을 골랐습니다. 공휴일과 주말을 제외하고, 회사 휴무일은 추가할 수 있게 했습니다.
첫 화면에는 오늘 할 일과 완료한 일, 지난 미완료 업무가 나옵니다. 실제로 끝낸 업무를 체크하고 완료 기록에서 다시 확인했습니다. 새로고침해도 기록이 남는지 확인했고, 기록을 따로 보관하는 백업 파일도 내려받았습니다.
처음 파일을 브라우저로 열었을 때는 글자와 버튼만 나왔습니다. 디자인과 기능 파일이 제대로 연결되지 않은 상태였습니다. 수정한 파일을 새로고침하자 디자인이 나타났고, 그제야 제 업무를 확인하는 화면으로 사용할 수 있었습니다.
이미지 작업실은 써보고 뺐습니다
홍보 소재나 공지 원문을 넣으면 게시글과 이미지까지 준비하는 기능도 원했습니다. 실제 홍보 문구를 넣어 카드 이미지를 만들어봤지만 결과가 단조로웠습니다.
제목 영역과 색상, 번호가 붙은 카드로 디자인을 바꿨습니다. 그래도 제가 다른 AI 채팅에서 만들어달라고 할 때 기대하는 이미지와는 차이가 컸어요.
원하던 이미지 품질과 차이가 있어, 이 기능은 빼는 쪽으로 결정했습니다.
결국 작업실을 제외했습니다. 홍보글과 이미지는 AI 채팅에서 만들고 수정하며, 대시보드는 실제 게시·발송을 끝낸 뒤 체크하는 데 집중합니다. 문자나 카카오톡 메시지를 자동 발송하는 기능까지 만든 것은 아닙니다.
처음 계획했던 기능을 그대로 유지하지 않고, 직접 사용한 결과로 범위를 바꾼 장면이었습니다. 이후 화면에는 오늘의 업무, 완료 기록, 설정·백업만 남겼습니다.
웹 배포 후 기록이 따로였어요
휴대폰에서도 사용하고 싶어 넷리파이(Netlify)에 앱 파일을 올렸습니다. 임시 사이트를 만든 다음 제 계정에 저장했고, PC와 휴대폰에서 같은 웹 주소가 열리는 것을 확인했습니다.
그런데 완료했던 업무 하나가 사라져 보였습니다. 처음 PC에서 파일로 열었던 앱과 배포한 웹사이트가 각각 다른 브라우저 저장 공간을 쓰기 때문이었습니다. 휴대폰 기록도 별도로 저장되고 있었습니다.
백업 파일로 기록을 옮기는 방법도 있었지만, 두 기기에서 계속 사용할 생각이라 자동 동기화를 요청했습니다.
자동 동기화를 다음 개선으로 정했습니다. 수파베이스(Supabase)에 기록 저장소를 만들고, 로그인한 사람이 자신의 기록만 읽고 바꾸도록 규칙을 설정했습니다. 코드를 직접 외워서 작성하지 않고, 준비된 코드를 입력할 위치와 실행 결과를 하나씩 확인했습니다.
저장소에 들어가는 프로젝트 주소와 공개 연결 키를 앱에 설정했습니다. 대시보드용 이메일 계정을 만든 뒤 PC와 휴대폰에서 같은 계정으로 로그인했습니다. 화면에 동기화 완료가 표시됐고, 한 기기에서 바꾼 체크가 다른 기기에 나타났습니다.
동기화 간격을 3초로 줄였어요
처음에는 자동 반영이 느렸습니다. 기다려도 그대로여서 수동 동기화 버튼을 눌렀고, 반영된 것을 확인했습니다. 다시 자동으로 바뀌는지 테스트하니 제 체감으로 20초에서 30초가 걸렸습니다.
체크 하나를 확인하는 데 이 정도로 기다리는 건 답답해서, 반영 속도를 개선해달라고 요청했습니다.
첫 구현이 20초마다 새 기록이 있는지 확인하는 방식이었습니다. 같은 웹사이트여도 PC와 휴대폰은 별도의 화면을 띄우고, 온라인 저장소의 변경을 받아야 다른 기기의 화면이 바뀐다는 설명을 들었습니다.
확인 간격을 3초로 줄이고, 기록이 바뀌었을 때만 온라인에 다시 저장하도록 수정했습니다. 이미 요청 중이면 새 요청을 겹쳐 보내지 않도록 했습니다. 새 파일을 기존 사이트에 다시 올린 뒤 양쪽 화면을 새로고침했습니다.
PC에서 체크를 바꾸고 휴대폰 화면을 켜둔 상태로 기다려봤습니다. 이번에는 이전보다 빨리 바뀌었습니다.
3초는 앱에 설정한 확인 간격입니다. 실제 반영 시간을 정확하게 측정한 값은 아니고, 이전보다 빨라진 것을 직접 확인했습니다. 서버가 변경을 즉시 알려주는 실시간 방식까지 구현한 것은 아닙니다.
다음에도 버튼 결과부터 확인할래요
현재 대시보드는 영업일의 반복 업무를 표시하고, 공지를 추가하고, 끝낸 일을 완료 기록으로 남깁니다. PC와 휴대폰에서는 같은 계정의 업무 기록이 자동으로 반영됩니다. 프로 젝트 소개도 학습허브에 정리했습니다.
공휴일 지원은 현재 2026년에 한정됩니다. 앱이 닫혀 있을 때 보내는 업무 알림은 없고, 실제 문자 발송과 카톡방 게시도 제가 직접 해야 합니다. 오프라인에서 체크한 뒤 다시 연결하는 상황과 동시에 같은 업무를 수정하는 상황은 실제 기기에서 더 확인해야 합니다.
이번 작업에서 저는 AI가 만든 화면을 직접 사용하고 결과를 알려주는 역할을 했습니다. 기대와 다른 이미지 기능을 빼고, 기기마다 기록이 따로인 문제를 발견하고, 동기화가 느리다고 다시 요청했습니다. 안내대로 진행하는 데서 시작했지만, 직접 써보면서 필요한 기능과 수정할 점을 구체적으로 이야기할 수 있게 됐습니다.
비슷한 도구를 만든다면 아래처럼 요청하고, 단계마다 직접 눌러보며 진행하면 됩니다. 제 요청을 요약해봤습니다.
[내 반복 업무]를 놓치지 않도록 오늘 할 일과 완료 기록을 보여주는 첫 앱을 만들어줘.
주말·공휴일 규칙과 월간 업무를 반영하고, 기능을 한 번에 많이 넣지 말아줘.
무엇을 왜 만드는지 쉬운 말로 설명하고, 내가 확인할 행동을 한 번에 하나씩 안내해줘.
직접 써본 결과로 개선하고, 여러 기기에서 쓸 때 기록 저장 방식도 설명해줘.
