서론: 작동하는 코드 위에 ‘감성’을 한 스푼 얹다
지난 편에서 우리는 AI가 뱉어낸 외계어 같은 코드를 복사하고 붙여넣어, 마침내 6개의 숫자가 화면에 찍히는 기적을 맛보았습니다. 기능적으로는 완벽했습니다. 버튼을 누르면 숫자가 섞이고, 무작위로 번호가 추출되었습니다.
하지만 이 페이지를 제 지인들에게 공유하거나 외부 사람들에게 자랑하기에는 어딘가 부끄러웠습니다. 화면 상단에는 너무 직관적이다 못해 투박한 텍스트들이 덩그러니 놓여 있었기 때문입니다. 훌륭한 마이크로 SaaS는 단순한 ‘기능 구현’을 넘어, 유저가 계속 머무르고 싶게 만드는 매력적인 인터페이스(UI)와 사용자 경험(UX)을 갖추어야 합니다. 첫 코딩의 기쁨이 가라앉자마자, 저는 코더(Coder)의 모자를 벗고 다시 기획자(Director)의 시선으로 화면을 노려보기 시작했습니다. 그리고 AI 비서를 쉴 새 없이 괴롭히는 ‘문구 수정’과 ‘디테일 다듬기’의 여정이 시작되었습니다.
1. 클릭을 부르는 네이밍의 힘: ‘행운의 기운’을 불어넣다
가장 먼저 눈에 거슬린 것은 메인 타이틀과 버튼의 이름이었습니다. 처음 AI가 임의로 달아준 “대박 기원 로또”라는 뻔한 제목은 마치 90년대 플래시 게임 사이트 같은 느낌을 주었습니다. 버튼 역시 처음엔 제가 유치하게 설정했던 “새로운 번호 섞기 (보물 찾기)”라는 이름이 달려 있었습니다.
기획자의 감각을 발휘하여 텍스트 교정 작업에 들어갔습니다. 코드를 직접 수정할 필요 없이, AI 채팅창에 이렇게 요구했습니다.
-
메인 타이틀 수정: “‘대박 기원 로또’를 **’행운이 가득한 로또 기운 생성기’**로 변경해 줘.”
-
버튼 문구 다듬기 (1차): “‘새로운 번호 섞기 (보물 찾기)’를 **’새로운 로또 번호 생성’**으로 문구를 수정해 줘.”
-
버튼 문구 다듬기 (2차): 전체적인 사이트 톤앤매너에 맞추기 위해 다시 지시했습니다. “‘새로운 로또 번호 생성’ 문구를 **’행운이 가득한 로또 기운 생성’**으로 바꿔줘.”
단지 글자 몇 개를 바꿨을 뿐인데, 투박했던 번호 추첨기가 순식간에 신비로운 기운을 담아주는 그럴듯한 서비스로 포장되었습니다.
2. 유저 체류 시간을 늘리는 영리한 기믹(Gimmick) 추가
마이크로 SaaS에서 유저가 단 1초 만에 결과를 보고 나가버리면 수익화(광고 노출)에 치명적입니다. 사람들의 호기심을 자극해서 화면에 조금이라도 더 머물게 할 ‘기믹(Gimmick, 흥미를 끄는 장치)’이 필요했습니다.
그냥 번호만 나오는 것이 아니라, 백그라운드에서 인공지능이 무언가 엄청난 분석을 통해 번호를 점지해 주는 듯한 콘셉트를 기획했습니다. 처음엔 버튼 아래에 “(클릭하여 숨겨진 AI 점수 확인)”이라는 안내 문구를 넣었습니다. 하지만 뭔가 가벼워 보였습니다. 다시 AI에게 프롬프트를 날렸습니다.
-
기믹 문구 수정: “‘(클릭하여 숨겨진 AI 점수 확인)’을 **'(클릭하여 AI 정밀 분석 결과를 참고하세요)’**로 바꿔줘.”
결과가 나오기 전 짧은 딜레이 애니메이션과 함께 이 문구가 노출되자, 지인들은 정말로 이 사이트가 AI 알고리즘을 통해 심도 있는 로또 분석을 해준다고 믿기 시작했습니다. (물론 자바스크립트의 난수 생성 기능일 뿐이지만 말입니다!)
3. 욕심이 부른 대참사, 그리고 롤백(Roll-back)의 미학
자신감이 하늘을 찌른 저는 점점 선을 넘기 시작했습니다. “번호를 처음엔 아예 숨겨뒀다가, 클릭하면 스크래치 복권처럼 하나씩 까보는 효과를 넣어줘!”라며 무리한 애니메이션 기능을 AI에게 요구했습니다.
AI는 묵묵히 새로운 자바스크립트 코드를 짜주었습니다. 그리고 복사-붙여넣기를 한 순간… 대참사가 일어났습니다.
숫자는 화면 밖으로 날아가 버렸고, 애써 다듬어 놓은 레이아웃은 형체를 알아볼 수 없게 찌그러졌습니다. 에러 코드를 해결해 보려 발버둥 쳤지만, 이미 원본 코드가 너무 많이 변형되어 어디서부터 손을 대야 할지 알 수 없는 지경에 이르렀습니다. 코딩 초보가 가장 좌절하는 ‘기능 꼬임’ 현상입니다.
이때 억지로 코드를 고치려다 밤을 새우는 대신, 저는 AI에게 아주 솔직하고 직관적인 프롬프트를 던졌습니다.
-
구원의 주문: “내가 원하는 게 이상해졌어. 이전 버전으로 다시 수정해 줘.”
이 한마디는 코딩 세계에서 말하는 ‘롤백(Roll-back)’과 같습니다. AI는 즉시 제가 스크래치 기능을 요구하기 직전의 안정적인 코드 상태를 기억해 내고, 완벽하게 원상 복구된 코드를 다시 뱉어냈습니다. 버전 관리 시스템(Git)을 모르는 비전공자에게, 대화형 AI는 그 자체로 가장 든든한 타임머신이 되어주었습니다.
4. UI/UX 텍스트 수정 전후 비교
| 변경 요소 | 기존 버전 (초안) | 최종 수정 버전 (AI 지시 후) | 기대 효과 |
| 타이틀 | 대박 기원 로또 | 행운이 가득한 로또 기운 생성기 | 감성적 접근 및 기대감 부여 |
| 버튼명 | 새로운 번호 섞기 (보물 찾기) | 행운이 가득한 로또 기운 생성 | 타이틀과의 톤앤매너 통일 |
| 안내 문구 | (클릭하여 숨겨진 AI 점수 확인) | (클릭하여 AI 정밀 분석 결과를 참고하세요) | 전문성 부여 및 유저 호기심 극대화 |
결론: 비전공자의 무기는 코드가 아니라 ‘집요함’이다
기능이 고장 났을 때 솔직하게 “이전으로 돌려줘”라고 말할 수 있는 용기, 그리고 버튼의 텍스트 한 줄이 마음에 들 때까지 AI를 집요하게 괴롭히는 기획자의 마인드. 이것이 바로 코딩을 모르는 우리가 퀄리티 높은 웹 서비스를 만들어내는 핵심 무기입니다.
이제 첫 번째 프로젝트가 그럴듯한 모습을 갖추었습니다. 하지만 진정한 마이크로 SaaS의 완성은 ‘수익화’에 있습니다. 다음 편에서는 이 예쁘게 다듬어진 웹페이지에 호기롭게 구글 애드센스 광고를 붙이려다 겪은 쓰라린 실패와, 뼈아픈 레이아웃 붕괴 사건의 전말을 다루어보겠습니다.