금손 디자이너를 모신 비밀 레시피: 랠릿 이력서 테마 공방│인프콘2024

랠릿 프론트엔드는 여러 서비스와 디자인 시스템을 한 모노레포에 두고 React 미리보기 컴포넌트와 Handlebars 테마를 조합한다. Handlebars는 템플릿의 변수 자리를 데이터로 바꿔 HTML 화면을 만들며, 구매한 HTML·CSS 디자인을 적은 변환 비용으로 활용하려고 선택됐다. 이 구조는 테마 제작 속도를 높였지만 작업자가 랠릿의 복잡한 데이터와 내부 실행 환경까지 이해해야 하는 부담도 만들었다.

시중 디자인을 구매해 HTML·CSS 형태를 최대한 유지하면 React 컴포넌트로 다시 만드는 비용 없이 테마를 빠르게 늘릴 수 있다고 판단했다. 그러나 내부 리소스가 부족해 개발팀만으로 작업을 계속할 수 없었고, 코딩을 배우던 외부 디자이너와 협업하게 됐다. 디자이너가 실제 제작에 집중하려면 저장소와 데이터 구조의 복잡성을 가리고 즉각 결과를 확인할 수 있는 전용 도구가 필요했다.

프로필은 여러 섹션과 배열·객체가 섞인 복잡한 데이터를 사용하며, 값이 비어도 구분선과 레이아웃이 자연스럽게 유지되어야 한다. 기존 미리보기는 테마 서버와 B2C 서버를 함께 실행해야 해 외부 작업자에게 제공하기 어렵고 공개 링크도 만들지 못했다. 섹션별 템플릿과 마크다운 클래스 같은 반복 코드까지 매번 직접 작성해야 했으므로 데이터 검증·시각 확인·공유·생성을 체계적으로 자동화해야 했다.

테마 저장소를 모노레포로 바꾸고 Vite와 Handlebars 기반 공방 패키지를 분리해 작업자가 HTML·CSS와 최소한의 템플릿 문법에만 집중하게 했다. 섹션 누락은 푸시 전 테스트로 막고, 로컬 미리보기와 데이터 컨트롤러로 빈값 레이아웃을 실시간 점검하며, Jenkins가 공개 링크를 만들어 모바일 QA와 리뷰를 지원한다. Hygen 템플릿과 스크립트가 반복 파일 생성·병합·전송을 처리한 결과 외부 디자이너가 안정적으로 새 테마를 제작하고 팀은 유지보수 가능한 흐름을 갖게 됐다.