【Codex × GAS】브라우저만으로 사내 출퇴근 시스템을 만들었다!

지난 기사에서는 Codex를 브라우저만으로 셋업하고 GitHub 리포지토리(Repository)에 연결하는 부분까지 해설했습니다.

이번에는 드디어 실전 편입니다.

그 Codex 환경을 사용하여, 실제로 사내에서 사용할 수 있는 출퇴근 시스템을 만듭니다.

게다가,

• 사원 번호 입력 불필요
• Google 계정에 로그인되어 있으면 자동으로 타각자 식별
• 기록은 Google Spreadsheet에 실시간 저장
• 설치 불필요 · 전부 무료

라는, 상당히 실용적인 구성입니다.

지난 기사는 이쪽:

【Codex】다운로드 불필요. 브라우저만으로 AI 코딩 에이전트를 시작하는 방법

• 이번에 만드는 것
• 시스템 구성과 사용 기술
• 필요한 것
• Step 1. Google Spreadsheet를 준비하기
• Step 2. Google Sites를 준비하기
• Step 3. Codex로 GAS 코드 생성하기
• Step 4. GAS에 코드를 붙여넣고 배포하기
• Step 5. Google Sites에 UI 임베드하기
• Step 6. 동작 확인하기
• 실제로 막혔던 포인트
• 요약

사내 출퇴근 타각 시스템입니다.

기능은 심플하게 압축했습니다.

• 출근 버튼을 누른다 → Spreadsheet에 기록
• 퇴근 버튼을 누른다 → Spreadsheet에 기록
• 타각자는 Google 계정의 이메일로 자동 식별
• 사원 번호 · 이름 입력 불필요

"너무 심플하지 않아?"라고 생각하실 수도 있지만, 이것이 Codex와 궁합이 가장 좋은 소재입니다.

실무에서도 "우선 돌아가는 것을 만들고, 나중에 기능을 추가한다"가 정답입니다.

이번 시스템은 다음과 같은 구성입니다.

직원의 브라우저 (Google 계정으로 로그인 완료)
↓
Google Sites (공개 페이지 · 버튼 UI 표시)
...

사용 기술은 다음과 같습니다.

역할	기술	이유
공개 페이지	Google Sites	조직 내 한정 공개가 간단함
...

Google Sites는 "<script> 태그를 직접 임베드할 수 없다"라는 제약이 있습니다.

따라서, GAS로 UI까지 만들어서 Web App으로 배포 → Sites에 임베드하는 구성으로 하고 있습니다.

GAS가 "UI 표시"와 "Spreadsheet 쓰기"를 모두 담당하는 이미지입니다. 게다가 전부 무료입니다.

GAS의 Session.getActiveUser().getEmail()이라는 기능을 사용합니다.

Google Workspace의 조직 계정으로 로그인되어 있으면, 버튼을 누른 사용자의 이메일 주소를 자동으로 취득할 수 있는 기능입니다.

입력의 번거로움이 없고, 사칭도 방지할 수 있습니다.

필요한 것	비고
Google Workspace 계정	조직 계정 필수 (이메일 자동 식별을 위해)
...

먼저 타각 데이터의 저장소를 만듭니다.

Google Drive에서 신규 Spreadsheet를 생성하여, 1행에 다음 열을 입력해 주세요.

A열	B열	C열	D열
이메일	날짜	종별	시각

포인트: 시트 이름은 기본값인 "시트1"을 "타각기록"으로 변경해 두세요. 나중에 GAS 코드와 자동으로 대응됩니다.

다음으로 직원이 실제로 액세스할 페이지를 만듭니다.

Google Site에서 공백 사이트를 선택합니다.

사이트 편집 화면이 열립니다.

제목을 입력해 둡시다. 이번에는 "사내 출퇴근 시스템"으로 했습니다.

⚠️ 이 단계에서는 아직 UI를 임베드하지 않습니다.

GAS 배포가 완료된 후에 URL을 임베드합니다. 이대로 Step 3로 진행해 주세요.

여기가 이번의 핵심입니다.

Codex를 열고, 지난번에 연결한 리포지토리를 선택합니다.

다음 프롬프트(Prompt)를 그대로 복사해서 입력해 주세요.

Google Apps Script의 Web App으로 동작하는
출퇴근 타각 UI를 작성해 주세요.
【파일 구성】
...

포인트: 프롬프트는 심플하게 쓰는 편이 Codex가 불필요한 구현을 추가하지 않고 의도한 대로의 코드를 생성해 줍니다.

전송하면 Codex가 서버상에서 작업을 시작합니다.

잠시 기다리면, index.html과 Code.gs 2개의 파일이 생성됩니다.

클릭하면 코드 내용을 확인할 수 있습니다.

이 부분이 Codex의 재미있는 점입니다.

프롬프트(Prompt)를 던지는 것만으로 UI부터 백엔드(Backend) 처리까지 한 번에 생성해 줍니다.

'지시를 내리는 사람'과 '구현하는 사람'이 분업하는 듯한 느낌입니다.

생성이 완료되면 **「PR 작성하기」**를 클릭합니다.

PR이란 무엇인가?

PR(Pull Request)이란 Codex가 생성한 코드를 GitHub 리포지토리(Repository)에 저장하기 위한 메커니즘입니다.

'AI가 작성한 코드를 GitHub에 제출한다'는 이미지로, 다음과 같은 흐름으로 진행됩니다.

Codex가 코드 생성
↓
PR로서 GitHub에 제출
...

확인 화면이 표시됩니다.

**「Merge pull request」**를 클릭합니다.

**「Confirm merge」**를 클릭합니다.

⚠️ 이번에는 GAS에 직접 코드를 붙여넣기 때문에, GitHub의 코드는 어디까지나 백업용으로 활용합니다.

Codex가 생성한 코드를 GAS로 옮깁니다.

Step 1에서 작성한 스프레드시트(Spreadsheet)를 열고,

확장 프로그램 → Apps Script

를 클릭합니다.

편집 화면이 표시됩니다. 파란색 알림은 X를 클릭하여 닫습니다.

포인트: 스프레드시트에서 Apps Script를 열면 스프레드시트 ID를 설정할 필요가 없습니다. GAS가 자동으로 해당 스프레드시트를 인식합니다 (컨테이너 바인드 (Container-bound)).

Code.gs:

Codex가 생성한 Code.gs 내용을 그대로 붙여넣습니다.

저장 버튼을 클릭하여 저장합니다. 이 시점에서 프로젝트 이름을 변경해도 좋습니다.

index.html:

왼쪽의 「＋」 버튼을 통해 index.html 파일을 추가하고, Codex가 생성한 내용을 붙여넣습니다.

저장 버튼을 잊지 마세요.

오른쪽 상단의 **「배포」→「새 배포」**를 클릭합니다.

설정은 다음과 같이 해주세요.

항목	설정값
종류	웹 앱
...

⚠️ 여기가 가장 중요한 포인트입니다.

「다음 사용자로 실행」을 **「웹 앱에 액세스하는 사용자」**로 설정하지 않으면 이메일 주소를 가져올 수 없습니다.

**「배포」**를 클릭하면 웹 앱(Web App) URL이 발행됩니다.

이 URL을 복사해 두세요. 다음 단계에서 사용합니다. 「배포 관리」에서 언제든지 확인할 수 있습니다.

Step 2에서 준비한 구글 사이트(Google Sites)로 돌아갑니다.

페이지 편집 화면에서 **「삽입」→「임베드(Embed)」**를 선택합니다.

「URL로 삽입」 탭을 선택하고, Step 4에서 복사한 웹 앱 URL을 입력합니다.

**「삽입」**을 클릭하면 페이지에 UI가 삽입됩니다.

포인트: 이 편집 화면의 미리보기에서는 버튼을 누를 수 없습니다. 공개 후에 동작을 확인합니다.

오른쪽 상단의 **「게시」**를 클릭합니다.

URL의 끝부분(사이트 이름)을 설정하여 게시합니다. 표시되는 URL은 복사하여 기록해 둡시다.

공개 범위는 **「조직 내 사용자」**로 되어 있는지 확인해 주세요.

이것으로 사내 Google 계정을 가진 직원들만 액세스할 수 있는 출퇴근 시스템이 완성되었습니다.

공개된 Google Sites의 URL을 열어봅시다.

처음 URL을 열면 권한 승인 다이얼로그가 표시됩니다.

(Unverified)라고 표시되지만, 이는 정상입니다.

직접 만든 사내 앱은 Google의 심사를 받지 않았기 때문에 이러한 표시가 나타납니다. 에러가 아닙니다.

다음 절차에 따라 승인해 주세요.

**「REVIEW PERMISSIONS」**를 클릭 - Google 계정 선택

**「고급(Advanced)」**을 클릭 - **「(앱 이름)(안전하지 않은 페이지)로 이동」**을 클릭 -
**「허용(Allow)」**을 클릭

⚠️ 이 권한 승인은 최초 1회만 필요합니다.

한 번 승인하면 다음부터는 표시되지 않습니다.

승인이 완료되면 버튼 UI가 표시됩니다.

「출근」 버튼을 눌러 봅니다.

로딩 표시 → 전송 완료 토스트(Toast) 메시지가 표시되면 성공입니다.

이메일 주소·날짜·종류·시각이 스프레드시트에 기록되어 있다면 완성입니다 🎉

원인: Google 심사를 받지 않은 사내 앱에는 반드시 표시됩니다.

해결: 「REVIEW PERMISSIONS」→「詳細 (상세)」→「移動 (이동)」→「許可 (허가)」 순으로 진행하기만 하면 OK입니다.

단계	내용
Step 1	Google Spreadsheet (구글 스프레드시트) 준비
...
Codex에 프롬프트를 한 번 입력하는 것만으로, UI부터 백엔드 (Backend)까지 생성할 수 있었습니다.

코드를 한 줄도 쓰지 않고, 사내에서 실제로 사용할 수 있는 출퇴근 시스템이 완성되었습니다.

솔직히 말하면, 이 정도의 코드라면 일반적인 ChatGPT로도 생성할 수 있습니다.

그럼에도 Codex를 소개한 이유는, **"코드를 생성하고 끝나는 것이 아니라, GitHub에 저장 및 관리까지 한 번에 할 수 있다"**는 경험을 전달하고 싶었기 때문입니다.

코드는 만들고 끝나는 것이 아니라, 수정·개선·인수인계가 반드시 발생합니다. Git이나 GitHub는 이를 위한 도구입니다. 익숙하지 않은 분들에게는 조금 문턱이 높게 느껴질 수도 있겠지만, Codex를 통해 그 흐름을 체험할 수 있는 것이 이번의 진정한 가치라고 생각합니다.

AI를 사용한 개발에서 중요한 것은,

"무엇을 만들지 설계하는 능력"과 "AI에게 올바르게 지시하는 능력"

입니다. 도구는 바뀌어도 이 두 가지는 변하지 않습니다. 우선은 작게 시작해 보세요.