새벽 6시간, 데모 사이트를 대량으로 찍어낸 날

포트폴리오 쇼케이스 사이트에 카드가 하나씩 올라가는 건 보통 며칠에 걸쳐 천천히 이뤄지는 일인데, 이날 새벽은 달랐다. 0시 넘어서 키보드를 잡았고, 6시가 다 되어갈 무렵까지 commit이 끊이지 않았다. 총 10개 넘는 커밋, 그 중 대부분이 신규 데모 페이지 추가나 기존 데모 재구성이다. 단순히 양이 많았던 게 아니라 B2B 건축자재 데모 하나가 그날 밤 세 번이나 구조를 바꿨다. 그 경위부터 정리하는 게 맞을 것 같다.

B2B 건축자재 데모, 세 번의 커밋으로 진화하다

첫 커밋 타이밍에는 "건축자재 B2B 홈페이지+관리자 라이브 작동 데모 추가"였다. 처음 설계는 단순했다. 제품 목록, 관리자 패널, 시공사례 정도를 한 페이지에 묶는 구조. 근데 작업하면서 이게 너무 밋밋하다는 게 눈에 들어왔다. B2B 건축자재라는 도메인 자체가 단순 쇼핑몰이 아니라 복잡한 제품 스펙, 색상 시스템, 자재별 기술문서가 핵심인데, 그걸 텍스트 목록 몇 개로 때우면 "진짜 같은 데모"가 안 된다.

그래서 두 번째 커밋에서 바로 전체 재구성에 들어갔다. "3D 컬러+텍스처+제품+시공사례+관리자 한 사이트"라는 방향으로. 이 시점부터 demo/b2b-materials/index.html이 단일 파일임에도 꽤 복잡한 구조물이 됐다.

세 번째 커밋은 PPT 스토리보드 요구 반영이라는 메모가 붙어 있다. 아마 이날 낮이나 직전 저녁에 영업팀이나 기획 쪽에서 스토리보드를 전달했을 거고, 거기에 PRODUCT를 STO 시스템 구조(Façade / Acoustic / Interior 좌측 펼침 메뉴 + Overview 탭)로 재편하고, Color Toolkit(카탈로그, 코드/RGB/계열 검색, 3D 적용), 레퍼런스 필터 관리자 토글(기본 비활성) 요건이 담겨 있었던 거다.

네 번째 커밋은 SUPPORT 자료실과 EWIS 시스템 단면 핫스팟을 얹는 작업이었다. TDS(기술 데이터 시트), 성적서, 인증서, MSDS를 아코디언 UI로 묶고 매핑 소스를 연결하는 구조다. 실제 건축자재 B2B 사이트에서 이 문서들이 얼마나 중요한지는 도메인을 조금만 알면 알 수 있다. 설계사나 시공사 담당자가 스펙 검토할 때 TDS가 없으면 아예 대화가 안 되는 경우가 많으니까. EWIS 단면 핫스팟은 시스템 단면도 위에 마커를 얹어서 구성 레이어를 설명하는 방식인데, 이걸 정적 이미지로 때우지 않고 인터랙티브하게 만드는 게 이 데모의 차별점이었다.

한 밤 사이에 같은 파일이 이렇게 여러 번 바뀌면 머지 충돌 걱정이 생기기 마련인데, 이날은 브랜치 없이 main 직행으로 쌓았다. 빠르게 쇼케이스를 완성해야 하는 상황에서는 그게 현실적인 선택이기도 하다.

단품 데모들, 한 번에 쏟아내기

b2b-materials 외에도 그날 새벽에 새로 올라온 데모가 4개다.

facade-3d는 b2b-materials와 도메인이 겹치지만 역할이 다르다. b2b-materials가 "사이트 전체 경험"을 보여주는 통합 데모라면, facade-3d는 "3D 컬러 비주얼라이저 하나"에 집중하는 단품 데모다. 동일한 건축자재 도메인을 두 각도로 제시하는 셈이고, 잠재 고객 입장에서는 전체 패키지가 필요한지, 비주얼라이저만 붙이면 되는지 판단할 수 있는 옵션이 생긴다.

company-site는 추가하면서 한 가지 실수가 붙었다. 처음 만들 때 샘플 데이터로 실존 회사명을 그대로 넣었다가 바로 다음 커밋에서 픽스했다. "한울테크 → 샘플컴퍼니"로 바꾼 거다. 데모에서 실존 회사명을 쓰면 그 회사가 해당 서비스의 고객이라는 오해를 살 수 있고, 최악의 경우 그 회사 쪽에서 문제 제기를 할 수도 있다. 작은 픽스지만 생각 없이 넘어가면 후폭풍이 생기는 종류라 빠르게 잡은 게 맞다.

<!-- before -->
<h1>한울테크 홈페이지</h1>

<!-- after -->
<h1>샘플컴퍼니 홈페이지</h1>

email-template과 contact-mailer는 비교적 가벼운 데모다. 이메일 템플릿은 HTML 구조 + 교체 가이드를 함께 제공해서 납품 후에 클라이언트가 직접 텍스트를 갈아끼울 수 있다는 걸 보여주는 형태고, contact-mailer는 관심분야 드롭다운이 선택되면 메일 수신자나 제목이 동적으로 바뀌는 라우팅 로직을 시연하는 데모다. 둘 다 "이거 실제로 작동해요"를 증명하는 게 핵심이라 정적 스크린샷으로 떼우지 않고 라이브 인터랙션이 되도록 만들었다.

데모마다 썸네일 이미지(thumbs/*.jpg)가 세트로 따라붙고, index.html에 카드를 추가하는 패턴이 반복된다. 다섯 개 데모를 새벽에 연속으로 올리면서 이 패턴이 꽤 손에 익었다. 처음 몇 개는 썸네일 크기나 alt 텍스트를 맞추는 데 시간이 좀 걸렸지만, 후반부로 갈수록 빠르게 처리됐다.

포트폴리오 인프라 정비와 신규 사이트 온보딩

데모 작업 사이 사이에 인프라 관련 커밋도 끼어 있다.

favicon 세트 작업이 그 중 하나다. ico, apple-touch-icon, icon/32/16 raster 세트를 SVG 소스에서 뽑아내는 작업인데, 이게 생각보다 귀찮다. 브라우저별, 디바이스별로 요구하는 포맷이 다르고, 특히 iOS 홈 화면 추가 시 apple-touch-icon이 없으면 제목+기본 아이콘으로 뜨는 게 너무 초라해 보인다. SVG 하나 만들어두고 rsvg-convert나 ImageMagick으로 사이즈별로 뽑는 게 정석인데, 이날 어떤 툴로 처리했는지는 커밋 메시지에 없지만 public/ 아래 전체 세트가 한 번에 들어간 걸 보면 스크립트로 처리한 것 같다.

gamehotdeals.com 온보딩은 두 개 커밋으로 나뉜다. 하나는 Bing 등록과 favicon, uptime, CF, 로그 싱크 반영 (Bing 웹마스터 사이트 카운트가 39 → 40으로 올라간 것이 메모에 찍혀 있다), 다른 하나는 data/sites.json에 k7 public-surface 블록을 추가하는 작업이다.

// data/sites.json 에 추가된 블록 (마스킹)
{
  "id": "k7",
  "domain": "gamehotdeals.com",
  "surface": "public"
}

Bing 등록이 따로 기록에 남는다는 건 내부 SEO 인프라 관리 문서에 사이트별 등록 현황을 추적하는 테이블이 있다는 뜻이다. Google Search Console만 챙기고 Bing을 빠뜨리는 경우가 많은데, 글로벌 트래픽 비중이나 특정 지역(미국, 캐나다 등)에서는 Bing 점유율이 무시 못 할 수준이라 신규 사이트마다 체크리스트로 관리하는 게 맞다.

쇼케이스 사이트 index.html에도 gamehotdeals 카드가 새로 올라갔다. 썸네일과 함께. 이제 신규 사이트를 론칭할 때마다 이 패턴이 일관되게 따라간다 - sites.json 업데이트, SEO 등록 기록 갱신, 쇼케이스 카드 추가.

자동 생성 테스트가 조용히 올라온 새벽

새벽 내내 수동 작업을 하는 동안, psy 프로젝트 쪽에서는 daily auto-generated tests 커밋이 혼자 올라왔다. family-pet-caretaker-type, furniture-assembly-type, love-nurture-type 세 가지 테스트 JSON과 커버 이미지 webp 파일이다.

이건 사람이 만든 게 아니라 스케줄러가 돌아가며 자동으로 생성한 거다. cron 기반으로 매일 특정 시간에 새 심리 테스트 콘텐츠를 생성해서 커밋까지 자동으로 올리는 파이프라인이 이미 돌고 있다는 뜻이다. 수동으로 새벽을 태우는 데모 작업들 사이에 이 커밋이 끼어 있는 게 묘하게 대비된다. 한쪽은 손으로 직접 HTML 짜고 있고, 한쪽은 파이프라인이 알아서 콘텐츠를 찍어내고 있으니.

자동화 파이프라인이 안정적으로 돌아가고 있다는 걸 확인하는 건 이런 식으로 커밋 로그를 보면서 이루어진다. 오늘 날짜로 auto-generated 커밋이 있으면 파이프라인이 정상, 없으면 뭔가 터진 거다. 알람을 별도로 세팅하지 않아도 git log로 헬스체크가 되는 구조다.

새벽 6시간 동안 데모 5개 신규 추가, B2B 데모 3단계 진화, 사이트 온보딩 1건, favicon 정비, company-site 버그 픽스. 물량만 보면 무식하게 많은데, 흐름을 정리해보면 영업용 데모 포트폴리오를 한 번에 정비하려는 단일 목적으로 묶인다. 스토리보드 요구사항이 야간에 들어오면서 B2B 데모가 계속 변했고, 그 김에 다른 단품 데모들도 같이 올려버린 것. 인프라 정비는 그 사이에 틈틈이 처리한 거고.

이런 식의 "한 세션에 몰아서 정리" 패턴은 분산해서 작업할 때보다 컨텍스트 전환 비용이 적다는 장점이 있다. 썸네일 추가하고 카드 넣는 패턴을 다섯 번 반복하다 보면 손이 기억하고, 두 번째부터는 속도가 붙는다. 다만 새벽에 급하게 올린 company-site 실존 회사명처럼, 서두르다 보면 작은 실수가 끼어든다. 바로 잡아서 다행이지, 배포 후에 발견했으면 좀 더 복잡해졌을 거다.

🛒 이 글과 어울리는 추천 상품

• 책상조명 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.