3년 만에 홈페이지를 고쳤습니다
와이프는 현재 무인카페 주인입니다. 그리고 3년전 제가 워드프레스 기반으로 카페 홈페이지를 만들었었죠.
그 후로 거의 손을 안 댔습니다. 메뉴가 바뀌어도, 이미지가 달라져도, 홈페이지는 그냥 그 자리에 있었습니다. 관리가 번거로웠거든요. 어느 날 홈페이지를 열어봤더니, 현실과 너무 달랐습니다. 없어진 메뉴가 올라가 있고, 있는 메뉴가 빠져 있었습니다.
이건 아니다 싶었습니다. 그래 리뉴얼을 결심했습니다. (사실 작년ㅜ터..)
이번엔 쉽게 관리할 수 있는 구조로 처음부터 다시 만들기로 했습니다. 그 과정에서 AI를 적극 활용해보기로 했습니다.
첫 번째 난관: 메뉴 이미지 90장 정리
리뉴얼을 시작하자마자 첫 번째 벽이 나타났습니다.
메뉴 이미지 파일이 90개였습니다. (분쇄방식 기기만) 파일명은 전부 한국어였고, 크기도 제각각이었습니다. 웹에 올리려면 영문 파일명이 필요하고, 리사이징도 해야 했습니다. 90개를 하나씩 열어보고, 이름 바꾸고, 크기 조정하고. 생각만 해도 막막했습니다. 그리고 중간에 실수가 나오면 처음부터 다시입니다.
AI에게 물었습니다.
“한글 파일명을 영문으로 매핑하는 테이블을 만들어줘. 90개 전부.”
AI는 메뉴 이름을 하나씩 읽고, 영문 슬러그 형태의 매핑 테이블을 만들어줬습니다.
그리고 그 테이블을 기반으로 리사이징과 파일명 변환을 한 번에 처리하는 Python 스크립트까지 짜줬습니다. 스크립트를 실행하자, 90개 파일이 한 번에 정리됐습니다. 이미지를 일일이 열어볼 필요도 없었습니다. 손으로 했다면 반나절? 아니 일주일은 꼬박 걸렸을 작업이 대화 몇 번으로 끝났습니다.
두 번째 난관: 메뉴 데이터를 처음부터 다시 만들기
이미지 정리가 끝나자, 다음 문제가 나타났습니다. 메뉴 데이터였습니다. 3년 사이에 메뉴가 많이 바뀌었습니다. 새로 생긴 것도 있고, 없어진 것도 있었습니다. 25개 음료의 이름, 가격, 카테고리, 온도 옵션을 처음부터 다시 정리해야 했습니다.
그런데 이미 키오스크 화면에 현재 메뉴가 전부 나와 있었습니다.
키오스크 사진을 AI에게 보여줬습니다.
“이 사진 기반으로 메뉴 데이터를 JSON으로 만들어줘.”
AI는 사진을 분석해서 25개 음료를 카테고리별로 분류하고, 구조화된 데이터로 뽑아냈습니다.
- 아메리카노 계열 4종
- 카페라떼 계열 5종
- 스페셜 라떼 5종
- 밀크티 5종
- 에이드 & 차 6종
특정 머신에만 있는 메뉴는 주석 처리하고, 원산지 표기처럼 웹에 불필요한 정보는 걷어냈습니다. 핫/아이스 구분도 정리됐습니다. 사진 한 장을 대화 창에 올렸을 뿐인데, 메뉴 데이터가 완성됐습니다.
세 번째 난관: 커피 아닌 음료의 풍미를 어떻게 표현할까
메뉴 데이터가 생기자, 각 음료의 풍미를 어떻게 표현할지가 고민이 됐습니다. 기존 홈페이지는 모든 음료에 같은 풍미 축을 쓰고 있었습니다. 바디감 · 산미 · 쓴맛.
그런데 딸기라떼에 쓴맛 게이지가 있으면 어색합니다. 자몽에이드에 바디감이라니요. 3년 전 홈페이지를 만들 때 그냥 넘어간 문제였습니다.
이번엔 제대로 잡기로 했습니다. AI에게 물었습니다.
“커피가 아닌 음료에는 어떤 풍미 축이 어울려?”
AI는 과일 음료, 밀크티, 라떼 계열의 특성을 분석하며 대안을 제시했습니다. 결론은 단맛 · 산미 · 청량감 이었습니다.
분류 기준도 함께 정했습니다.
| 조건 | 분류 | 풍미 축 |
|---|---|---|
| 이름에 “카페” 포함 | 커피 | 바디감 / 산미 / 쓴맛 |
| “라떼"만 포함 | 커피 아님 | 단맛 / 산미 / 청량감 |
| 초코라떼, 더블초코, 카라멜라떼 | 커피 없는 라떼 | 단맛 / 산미 / 청량감 |
“그냥 라떼는 커피가 안 들어간 것"이라는 한 마디로 기준이 확정됐습니다. 3년 전에 그냥 넘어갔던 문제를, 대화 한 번으로 정리했습니다.
네 번째 난관: 무인카페에 맞는 언어 찾기
풍미 체계가 잡히고 나니, 각 음료의 소개 문구를 써야 했습니다.
기존 홈페이지에는 이런 표현이 있었습니다.
“스팀으로 부드럽게 거품을 낸 바디감 있는 라떼”
카페퍼플민트는 무인 자판기입니다. 스팀이 없습니다. 바리스타도 없습니다. 3년 동안 틀린 설명을 올려두고 있었던 겁니다.
AI에게 상황을 설명했습니다.
“우리 카페는 무인 자판기야. 바리스타 없이 기계가 음료를 만들어. 이 특성을 살리면서도 음료가 매력적으로 보이는 문구를 써줘.”
AI가 바꿔준 문구입니다.
“정밀하게 추출된 에스프레소와 신선한 우유가 만나, 기계가 일관되게 구현해내는 깊고 부드러운 라떼”
무인이라는 특성이 오히려 강점이 됐습니다. “일관되게"라는 단어 하나가, 매번 같은 맛을 낸다는 신뢰감으로 이어졌습니다. 카페의 결을 설명하면, AI가 그 결에 맞는 언어를 찾아줬습니다.
다섯 번째: 이번엔 관리하기 쉬운 구조로
리뉴얼의 가장 큰 목표는 관리였습니다. 3년 동안 손을 못 댄 이유가 “번거롭다"였으니까요. (워드프레스 한번 해보세요. 헬입니다. 헬)
AI와 함께 화면을 짜면서, 이번엔 메뉴를 쉽게 추가하고 수정할 수 있는 구조를 먼저 잡았습니다. 그 과정에서 크고 작은 문제들이 나타났습니다.
메뉴가 많아서 스크롤이 너무 길어진다.
→ 5개씩 슬라이드 전환 방식으로 바꿨습니다. 5초마다 자동으로 넘어갑니다.
에이드인지 밀크티인지 한눈에 구분이 안 된다.
→ 이름 패턴을 분석해서 자동으로 뱃지를 붙이도록 했습니다.
`자몽에이드`면 에이드 뱃지, `얼그레이밀크티`면 밀크티 뱃지.
모달에서 이미지가 위아래로 잘린다.
→ `object-fit: cover`를 `object-fit: contain`으로 바꿨습니다.
#### 모바일에서 풍미 게이지가 제대로 안 보인다.
→ `align-items: flex-start`가 원인이었습니다. `stretch`로 수정했습니다.
문제를 말하면 AI가 원인을 짚어주고 코드를 고쳐줬습니다. 버그가 하나씩 잡힐 때마다 화면이 조금씩 완성됐습니다.
결론: 대화로 홈페이지를 만들었습니다
3년을 방치한 이유는 단순했습니다. 손이 너무 많이 가서였죠.
이번 리뉴얼은 달랐습니다. 90개 이미지 일괄 처리, 키오스크 사진 한 장으로 메뉴 데이터 생성, 풍미 체계 설계, 문구 작성, 화면 구현까지. 전부 AI와 대화하면서 풀어냈습니다.
AI가 방향을 결정하지는 않았습니다. 카페를 가장 잘 아는 사람이 방향을 잡고, AI가 그 방향대로 빠르게 초안을 만들었습니다. 혼자였다면 엄두도 못 냈을 것 같습니다. 아니, 또 3년을 미뤘을 것 같습니다.
한번 해보세요. 생각보다 누구나 넘을 수 있는 문턱입니다.