TL;DR
프론트엔드 디자인을 손쉽게 만들어주는 `frontend-design` 플러그인을 활용해 프리미엄 건강기능식품 이커머스 웹사이트를 제작했어요. 하지만 세부 페이지마다 각기 다른 CSS 클래스 명명 규칙으로 인해 삽질을 했습니다. 결국 BEM 호환 레이어를 추가해 일괄 대응하면서 웹사이트를 완성할 수 있었죠.
오늘 뭘 만들었나
이번엔 고객사의 `AURA` 프리미엄 건강기능식품 이커머스 사이트를 만드는 작업이었습니다. 디자이너가 작성한 모든 페이지 디자인을 `frontend-design` 플러그인으로 구현하면 된다고 생각했죠. (올해 최고의 AI 스킬이라고 하더라고요!)
AI 디자인 플러그인으로 맘껏 뚝딱
프론트엔드 코드를 자동으로 생성해주는 `frontend-design` 플러그인이 있다는 사실에 너무 좋았어요. 이 플러그인을 활용하면 디자이너가 만든 아트웍을 그대로 HTML/CSS/JS로 옮길 수 있다고 해서 일단 시작했죠.
먼저 디자인 브리프 파일을 주고받으면서 플러그인을 사용하기 시작했습니다. 디자이너가 만든 UI를 그대로 옮기면 된다고 생각했는데... (맙소사) 각 페이지마다 CSS 클래스 명명이 다르더라고요! BEM 방식, 하이픈 방식, 혼합 방식까지 다양했습니다.
아, 참고로 이 플러그인은 '프로덕션 퀄리티'라고 하더라고요. 사실 별로 그렇지 않은 것 같습니다만, 어쨌든 최선을 다해 구현했습니다.
삽질의 연속, BEM 호환 레이어
클래스 명명 규칙이 달라서 일단 CSS를 페이지별로 다 만들었어요. 그리고 JS도 각 페이지에 맞춰서 업데이트했죠.
그런데 막상 확인해보니 레이아웃이 깨져 있더라고요. 이래서는 유지보수가 어렵겠다 싶었죠. 결국 CSS와 JS 모두를 일괄 수정해야 했습니다.
// BEM 호환 레이어 추가
.footer__column {
...
}
.accordion__header {
...
}
페이지마다 다른 CSS 규칙들을 한곳에 정리하고, JS에서도 모든 선택자 패턴을 지원하도록 업데이트했습니다. 처음에는 좀 귀찮았지만, 결과적으로 깔끔한 코드가 완성되어서 뿌듯해요.
삽질 & 교훈
이 프로젝트를 하면서 가장 큰 교훈은 '자동화도 무조건 좋은 건 아니다'라는 점이었습니다. 디자인 시스템이 잘 정립되어 있지 않으면 오히려 개발 작업이 늘어날 수 있더라고요.
어쨌거나 이번에 BEM 방식의 CSS 클래스 네이밍 규칙과 JS 선택자 처리 기법을 다시 한번 익힐 수 있어서 좋았습니다. 이런 부분들은 실무에서 계속 중요해지고 있으니까요.
결과물
최종적으로 7개 페이지(메인, 상품목록, 상품상세, 게시판목록, 게시판상세 등)와 CSS, JS 파일 등 총 9,339줄의 코드가 완성되었습니다. 디자인 브리프에 충실하게 구현했고, 반응형과 동적 인터랙션까지 모두 포함했죠.
과정이 쉽지는 않았지만, 결과적으로 프리미엄 건강기능식품 브랜드에 어울리는 깔끔하고 세련된 웹사이트가 만들어졌습니다. 고객사 분들도 상당히 만족하시더라고요.