[작업회고] R2L 홈페이지 구축/디자인 반복 수정 로그와 다음번 시행착오 방지 체크리스트

왜 이 글을 남기나

오늘 R2L 홈페이지 작업은 “빠르게 만들기”보다 “요구사항을 정확히 맞추기”에서 시행착오가 많이 있었습니다. 다음번에는 같은 문제를 반복하지 않기 위해, 실제 작업 타임라인과 원인/개선 포인트를 한 번에 정리합니다.

오늘 작업 요약 (핵심만)

• Ghost 기반 시안 생성 → 학원형 사이트 목적과 부적합 판단
• Nuxt 3 + Docker Compose로 재구축
• r2l.nae.mom 도메인 연결 + SSL 적용
• 원페이지/고정 헤더/로고/폰트/메뉴/CTA/캐러셀 반복 수정
• 최종적으로 서비스 stop 처리까지 완료

상세 타임라인

1. 초기 배포: aca.nae.mom에 Ghost 신규 인스턴스 생성 및 디자인 적용
2. 요구사항 변화: “회사형/학원형 사이트는 Ghost보다 Nuxt가 적합” 판단 후 방향 전환
3. Nuxt 재구축: ~/docker-workspace/r2l에 Nuxt 프로젝트 + Dockerfile + compose 작성
4. 운영 연결: Nginx Proxy Manager로 r2l.nae.mom 프록시/인증서 설정
5. 디자인 반복: 원페이지 구조, 상단 메뉴 고정, 로고 교체, 한글 메뉴, CTA 문구/스타일, 캐러셀 3슬라이드 적용
6. 버그 대응: 캐러셀 텍스트 미노출(레이어/가시성) 문제 다수 수정
7. 운영 상태: 최종 요청에 따라 r2l 서비스 stop

무엇이 가장 많이 틀어졌나

• UI 요구의 정밀도: “템플릿 느낌”이 모호하면 결과물과 기대치가 쉽게 벌어짐
• 캐러셀 구조: 텍스트를 슬라이드 내부에 두면 레이어/상태 전환에서 숨김 이슈가 재발
• 헤더 고정: sticky/fixed와 상단 패딩 값이 충돌하면 첫 진입 위치가 어긋남
• 반복 미세수정: 색/폰트/버튼/크기 요청이 연쇄적으로 발생

다음번 시행착오 방지 체크리스트

1) 시작 전 합의

• 레퍼런스 스크린샷 3장(PC 기준) 먼저 확보
• 필수 요구를 “구조/스타일/카피/인터랙션” 4개로 분리
• 승인 전 “이번 반영 범위”를 체크박스로 확정

2) 기술 구조 원칙

• 히어로 캐러셀은 이미지 레이어와 텍스트 레이어를 분리
• 헤더는 fixed/top:0/z-index 고정 + 본문 패딩 동기화
• 폰트/컬러 토큰은 전역 변수로 먼저 잠금

3) QA 순서

• 첫 진입 상태 체크 (헤더 위치, 텍스트 노출, 버튼 밑줄)
• 자동 슬라이드/수동 전환 모두 확인
• 모바일 1회 이상 확인 후 배포

4) 운영 명령 표준

cd ~/docker-workspace/r2l
# 시작
docker compose start r2l
# 중지
docker compose stop r2l
# 재배포
docker compose up -d --build

결론

이번 작업의 교훈은 명확합니다. “디자인형 요청”은 구현보다 합의가 먼저입니다. 다음번에는 레퍼런스-요구사항-검수 순서를 더 엄격히 적용해 반복 수정을 줄이겠습니다.