영업 정보 포털 제작기

목표

• 영업에 필요한 안내를 한 곳에서 찾게 한다.
• 이미 쓰는 사내 앱과 PC 웹에서 바로 들어오게 한다. 새로 가입하거나 로그인하지 않는다.
• 직급별로 볼 수 있는 메뉴를 다르게 한다.
• 담당자가 코드 없이 콘텐츠를 고칠 수 있게 한다.

만든 과정

1. 흩어진 앱을 하나로 묶다 (2025년 11~12월) 따로 만든 안내 앱 세 개를 한 저장소에 모아 하나의 포털로 시작했습니다. 첫 두 달은 위촉 일정 달력 표시를 여러 번 다듬고, 가이드북 메뉴를 다시 짜고, 모바일에서 보기 좋은 두 줄 배치로 바꾸고, 담당자 안내와 재정보증 메뉴를 더했습니다.

2. 메뉴를 넓히고 배포 기반을 옮기다 (2026년 1월) 교육 과정과 규정 메뉴, 시책, 문서 원문 보기(PDF 뷰어)를 더했습니다. 배포는 처음의 정적 호스팅에서 Cloudflare로 옮기고, 서버 기능을 모두 엣지(Edge)에서 돌도록 바꿨습니다. 이 달에만 커밋이 81건이었습니다.

3. 사내 앱과 연결하다 (2026년 2월) 로그인 화면을 만들고 사내 모바일 앱과의 연동을 시험한 뒤, 앱의 바로가기를 눌러 들어오면 별도 로그인 없이 사용자와 직급을 받아오는 SSO를 붙였습니다. 앱 안의 웹 화면에서 상단 노치에 화면이 가리는 문제도 이때 맞췄습니다.

4. 문서를 안전하게 옮기다 (2026년 3월) 가장 바빴던 달입니다(커밋 131건). 공유 드라이브 링크로 내려받게 하던 문서 양식을 모두 클라우드 저장소(R2)로 옮겼습니다. 아이폰에서 내려받기가 안 되는 문제를 포함해 다운로드 오류를 며칠에 걸쳐 고쳤고, 첫 화면과 디자인도 정비했습니다.

5. PC 웹을 열고 화면을 나누다 (2026년 4월) 사내 PC 웹에도 바로가기를 열었습니다. PC 화면을 고정형으로 만들고 통합 검색창을 넣었습니다. 이때 중요한 결정을 했습니다. 화면 폭에 따라 바뀌는 반응형이 아니라, 들어온 경로에 따라 PC용과 모바일용 화면을 완전히 따로 만들었습니다(아래 "디자인 결정"). 디자인 체계를 세 단계로 정리하고, 관리자 화면과 권한·문서 관리 방식을 다시 짰습니다.

6. 보안을 다지다 (2026년 5월) 여러 사람이 쓰는 서비스가 되면서 보안을 다시 봤습니다. 사용자 권한 정보를 서명된 토큰으로 바꾸고, 문서 저장소의 공개 접근을 닫은 뒤 인증을 거쳐서만 내려받게 했습니다. 프로젝트 지침 파일을 만들어 개발 규칙을 한 곳에 정리한 것도 이때입니다.

7. 콘텐츠를 담당자 손에 넘기다 (2026년 5~8월) 담당자 안내, 영상, 새 소식 표시, 메뉴 하위 항목별 권한까지 관리자 화면에서 고치도록 옮겼습니다. 제도가 개정될 때는 메뉴에 "개정중" 상태를 두고 옛 원문 보기를 막아, 바뀌는 중인 기준이 안내되지 않게 했습니다. 하반기 행사 페이지와 첫 화면 소식 슬라이드도 더했습니다.

8. 다음을 준비하다 (2026년 9월~) 구제도 페이지를 정리하고 PC 첫 화면 깜빡임을 고친 뒤, 전체 코드를 점검하고 리뉴얼 계획을 세웠습니다.

지금 할 수 있는 것

검색은 빌드할 때 전체 콘텐츠로 색인을 만들고, 결과를 누르면 해당 항목이 펼쳐진 상태로 열립니다.

구조

사내 모바일 앱 ─┐
                ├─ 바로가기 → 사용자·직급 확인 → 서명된 로그인 쿠키
사내 PC 웹 ─────┘                    │
                                      ▼
                      영업 정보 포털 (Cloudflare, 모든 서버 기능이 엣지에서)
                       ├─ 직급별 메뉴 규칙 (관리자가 수정)
                       ├─ 콘텐츠 (화면 + 관리자가 고치는 데이터)
                       └─ 문서 파일 → 비공개 저장소 → 인증 거쳐 내려받기

관리자와 담당자는 별도 계정으로 로그인해 관리 화면에 들어갑니다.

디자인 결정: 화면 폭이 아니라 들어온 경로로

보통은 화면 폭에 따라 배치가 바뀌는 반응형으로 만듭니다. 이 포털은 다르게 했습니다.

• 휴대폰 앱에서는 세로 화면만 쓰기로 했습니다. 가로 모드는 원하지 않았습니다.
• PC에서 창을 좁혔다고 모바일 화면으로 바뀌면 오히려 헷갈립니다.
• 그래서 앱에서 들어오면 모바일 화면, PC 웹에서 들어오면 PC 화면으로 정하고, 두 화면을 완전히 따로 만들었습니다.

대신 같은 내용을 두 벌 관리해야 하는 비용이 생겼습니다. 이 비용은 다음 리뉴얼에서 콘텐츠를 블록 단위 데이터로 옮겨 줄이려고 합니다. 알림 창은 브라우저 기본 경고창 대신 화면 아래에 잠깐 뜨는 안내로 통일했습니다.

AI와 함께 만든 방식

구현은 Claude Code, 점검은 Codex, 페이지 디자인은 Google Stitch로 역할을 나눴습니다.

• 커밋에 "문제 → 해결 → 영향"을 남겼습니다. AI와 함께 만든 커밋 58건이 이 형식이라, 반년이 지나도 왜 바꿨는지 찾을 수 있습니다.
• 지침 파일 하나에 규칙을 모았습니다. 들어오는 경로, 권한 규칙, 저장 방식, 배포 절차를 적어 두고 AI가 매번 그것을 기준으로 일하게 했습니다.
• 코드 점검은 여러 에이전트로 나눠 진행하고, 코드와 대조하거나 직접 재현해 확인된 것만 계획에 넣었습니다. 사실이 아닌 지적은 따로 "기각" 목록에 남겼습니다.
• Codex로 한 번 더 점검했습니다. 전체 코드, 오류·에러가 날 수 있는 곳, 로그인과 권한·문서 다운로드 보안, 그리고 PC·모바일 두 벌 화면의 레이아웃과 디자인을 Codex가 따로 확인했습니다. 화면을 두 벌로 만든 만큼 한쪽만 고치고 다른 쪽을 빠뜨리는 일이 생기기 쉬워, 두 화면을 맞대어 보는 점검이 특히 필요했습니다.
• 페이지 디자인은 Google Stitch로 따로 만들었습니다. 메뉴별 PC·모바일 화면 시안을 Stitch에서 만들고 코드를 받은 뒤, 그대로 붙이지 않고 기존 컴포넌트와 디자인 체계, 들어온 경로별 화면 구조에 맞게 고쳐 넣었습니다.
• 콘텐츠를 문서로 뽑을 때는 "요약하지 말 것, 지어내지 말 것"을 작업 지침으로 주고 화면의 내용을 그대로 옮기게 했습니다.

지금 상태와 다음

• 사내 앱과 PC 웹에서 운영 중이며, 행사·제도 개정에 맞춰 콘텐츠를 계속 고치고 있습니다.
• 전체 코드 점검에서 보안과 구조 정리 과제를 뽑아 두었고, 리뉴얼 계획을 세웠습니다. 사용자·게시판·신청 접수를 담을 데이터베이스를 더하고, 로그인을 서버 세션 방식으로 바꾸고, 콘텐츠를 블록 단위로 관리하는 방향입니다. 아직 구현 전입니다.