AI 랜딩페이지 개선의 시작
입사 첫날, 회사가 저에게 사수를 붙여줬습니다. 그 유명한 그분, 네 맞습니다 뽀짝이, 뽀사수였죠.
미리 말씀드리고 싶은 게 있습니다. 이 글은 "AI가 다 알아서 해줬다"는 미담이 아닙니다. 직접 고치는 것보다 시간이 더 걸린 순간도 있었고, 시킨 적 없는 부분이 멋대로 바뀌어 있는 걸 발견한 순간도 있었습니다. 그런데 그 과정을 지나면서, 어떻게 시켜야 에이전트가 제대로 일하는지에 대한 감이 하나씩 잡혔습니다. 이 글은 그 감을 정리한 기록입니다.
입사 후 이틀 만에 랜딩페이지 디벨롭 요청을 받아 처음 뽀짝이와 일을 시작했을 때, 저는 순진하게 생각했어요. "말로 시키면 제가 직접 코드 만지는 것보다 빠르겠지." 하지만 그건 크나큰 오산이었습니다. 오히려 더 오래 걸렸어요. 제가 원하는 걸 말로 옮기고, 결과를 확인하고, 다시 설명하고, 또 확인하는 과정 자체가 생각보다 훨씬 느렸습니다. AI 특유의 장황하고 어색한 비유가 담긴 말투를 미세 조정하고, 간격 하나를 조정하면 나머지 간격이 깨지고. 처음에는 차라리 제가 피그마를 열어 수정하면 1시간에 끝날 일들인데, 라는 말을 여러 번 삼키며 그냥 손으로 고치는 게 더 빠르겠다 생각한 순간들이 분명히 있었어요. 하지만 그건 제 지시가 명확하지않기 때문이었죠
처음에 가장 골치 아팠던 건 예측 불가능한 부작용이었습니다. 한 번은 특정 영역을 디벨롭해서 새로 얹으려고 했는데, 엉뚱하게 이전 기수 랜딩페이지 내용이 그대로 끌려와서 노출된 적도 있었어요. 분명 지금 기수 얘기를 하고 있었는데, 화면엔 지난 기수 카피가 떠 있었습니다. 그렇게 몇 시간을 헤매면서 알게 된 점들을 공유합니다.
뽀짝이와 랜딩페이지 작업하는 과정에서 배운 점 공유해요!
1. 한 곳 고치면 다른 곳이 몰래 바뀌어요 → 작게 쪼개서 시키세요
AI 코드엔 눈에 안 보이는 숨은 연결이 많아서 한 부분만 건드려도 옆이 흔들려요. 그래서 큰 작업을 한 번에 맡기지 말고 영역별로 명시적으로 작은 단위로 쪼개서 그 부분만 수정해달라고시키면 사고를 훨씬 빨리 잡을 수 있어요.
2. 이전 버전 내용이 갑자기 튀어나와요 → 기준 문서를 하나 만들어두세요
에이전트는 대화마다 맥락을 잃기 쉬워서 지금 기수 얘기 중에 옛날 자료가 섞여 나올 수 있어요. 역할, 기준, 하면 안 되는 것을 문서 한 장에 미리 적어두면 매번 설명 안 해도 되고 결과도 훨씬 안정돼요.
3. 페이지마다 폰트·간격이 미묘하게 달라져요 → 기준값을 먼저 정해두세요
헤드라인 크기, 버튼 스타일, 섹션 간격이 페이지마다 조금씩 어긋나는 건 흔한 일이에요. 매번 감으로 "간격 0.5배 조정해줘" 하지 말고, 시작 전에 폰트 크기·패딩값 같은 기준과 시스템을 미리 정해두면 훨씬 편해요.
4. 카피 톤·이미지 무드가 왔다갔다해요 → 말보다 레퍼런스
저처럼 "밤티야, 더 영한 아바타 느낌으로" 같은 말로 이미지 제작을 요청하면 계속 헤매요. 톤 기준을 미리 잡아둬야 페이지마다 느낌이 안 흔들리고, 무엇보다 레퍼런스 이미지를 먼저 보여주는 게 말로 설명하는 것보다 훨씬 빨라요.
5. 모바일에서 갑자기 깨져요 → 반응형은 따로 꼭 물어보세요
데스크톱에선 멀쩡한데 폰으로 보면 무너져 있는 경우, 그냥 두면 에이전트가 알아서 확인 안 해줘요. "모바일에서 이 부분 잘 접 히는지 확인하고 문제 있으면 고쳐줘"처럼 반응형 체크를 따로 명시하는 습관 들이시면 좋아요.
6. 롤백은 꼭 사람이 판단하세요
수정과정에서 뽀짝이가 갑자기 자체 판단으로 23기 기수 랜딩페이지를 22기 기수 랜딩페이지로 바꿔 노출해준적이 있어요ㅠㅠ. 롤백의 경우, 에이전트가 아닌 사람이 결정하도록 규칙을 걸어두시는 게 안전해요.
24기 랜딩페이지는 더 잘 만들어볼 수 있겠죠?
모두들 화이팅!!☺️
