서론: 대망의 첫 프로젝트, ‘헬로 월드(Hello World)’를 넘어서
도메인을 연결하고 워드프레스라는 빈 도화지까지 준비를 마쳤습니다. 이제 이 공간에 실질적인 기능을 갖춘 나만의 첫 번째 웹 서비스를 올려놓을 차례입니다. 코딩의 세계에서는 처음 프로그래밍을 배울 때 화면에 ‘Hello World’라는 문구를 띄워보는 것이 일종의 관례입니다. 하지만 우리는 바쁜 1인 창업가입니다. 아무 기능도 없는 문구를 띄우는 대신, 당장 사람들이 재미있게 누르고 즐길 수 있는 작고 실용적인 툴을 첫 목표로 삼았습니다.
그렇게 선정된 대망의 첫 번째 프로젝트는 바로 ‘로또 번호 생성기’였습니다. 1부터 45까지의 숫자 중 6개를 무작위로 뽑아주는 아주 단순한 로직이지만, 버튼을 누를 때마다 새로운 결과값이 화면에 즉각적으로 나타나는 ‘동적 웹페이지’의 기본기를 익히기에는 이보다 더 완벽한 교보재가 없었기 때문입니다. 코딩 지식이 전무한 상태에서, 떨리는 손으로 AI 채팅창에 첫 프롬프트를 입력했던 그 순간의 생생한 기록을 공유합니다.
1. 첫 프롬프트의 결과: 마법처럼 쏟아지는 외계어들
로직을 쪼개는 법을 어렴풋이 익히긴 했지만, 첫술에 배부를 수는 없었습니다. 일단 무작정 AI에게 첫 번째 명령을 던졌습니다.
나의 첫 지시: “1부터 45까지 숫자 중에서 무작위로 6개 숫자를 뽑아주는 로또 번호 생성기 웹페이지를 만들어줘.”
엔터 키를 누르자마자 AI는 1초의 망설임도 없이 검은색 코드 블록 창을 띄우더니, 알 수 없는 텍스트들을 맹렬한 속도로 쏟아내기 시작했습니다. <div id="lotto-container">부터 시작해 Math.random(), document.getElementById 같은 난생처음 보는 영어 단어와 기호들이 화면을 가득 채웠습니다. 솔직히 말씀드리면, 마법 같다는 경이로움보다는 “이게 도대체 다 무슨 소리야?”라는 막막함이 앞섰습니다.
하지만 AI는 친절한 사수였습니다. 코드 밑에 이 외계어들이 각각 어떤 역할을 하는지 차분하게 한글로 설명을 덧붙여 주었습니다.
2. 비전공자의 눈으로 이해한 HTML, CSS, JavaScript의 뼈대
AI가 짜준 코드는 크게 세 가지 영역으로 나뉘어 있었습니다. 코딩을 전혀 모르는 비전공자 입장에서, 이 세 가지 언어의 역할을 집을 짓는 과정에 비유하니 완벽하게 이해가 되었습니다.
-
HTML (뼈대와 구조): 집의 기둥을 세우고 방을 나누는 작업입니다. 화면에 ‘로또 번호가 나올 네모난 상자(div)’를 만들고, 사용자가 누를 ‘버튼(button)’을 어디에 배치할지 구조를 잡아주는 텍스트들이었습니다.
-
CSS (인테리어와 디자인): 앙상한 뼈대에 페인트칠을 하고 예쁜 가구를 들이는 작업입니다. “글자 크기는 20px로 하고, 버튼 색상은 파란색으로, 번호가 나오는 공은 동그랗게 깎아줘”라는 디자인 명령들이 이곳에 모여 있었습니다.
-
JavaScript (전기와 수도, 움직임): 지어진 집에 전기를 넣어 버튼을 누르면 불이 켜지게 만드는 동적인 두뇌 역할입니다. 사용자가 ‘생성’ 버튼을 클릭했을 때 실제로 1~45 중 6개의 숫자를 계산하고, 중복된 숫자가 나오지 않게 걸러내는 핵심 논리(로직)가 자바스크립트로 구현되어 있었습니다.
비전공자는 이 복잡한 문법을 외울 필요가 전혀 없습니다. 단지 **”아, 화면 배치가 이상하면 HTML/CSS 부분을 수정해 달라고 하고, 버튼을 눌러도 숫자가 안 변하면 자바스크립트를 고쳐달라고 해야겠구나”**라는 큰 뼈대의 개념만 잡으면 충분합니다.
3. 내 웹사이트에 코드 이식하기: 두근거리는 첫 테스트
AI가 만들어준 이 세 가지 코드를 합쳐서, 제 워드프레스 사이트(heung-in.com)의 새 페이지에 복사하여 붙여넣었습니다. 워드프레스 편집기에서 ‘사용자 정의 HTML(Custom HTML)’ 블록을 추가한 뒤, AI가 준 코드를 그대로 Ctrl+C, Ctrl+V 한 것이 전부였습니다.
‘미리보기’ 버튼을 누르자, 방금 전까지 하얗던 화면 중앙에 동그란 빈 공 6개와 ‘번호 생성’ 버튼이 나타났습니다. 떨리는 마음으로 마우스 커서를 올려 버튼을 클릭했습니다.
[ 3 ] [ 14 ] [ 27 ] [ 31 ] [ 38 ] [ 42 ]
순식간에 6개의 숫자가 화면에 짜잔 하고 나타났습니다! 다시 누르니 숫자는 또 다른 번호로 바뀌었습니다. 내가 기획한 아이디어가 인공지능의 손을 거쳐, 전 세계 누구나 접속해서 누를 수 있는 실제 웹 서비스로 탄생하는 역사적인 첫 순간이었습니다.
4. 첫 결과물에 대한 성찰과 다음 목표
| 구분 | 첫 코딩의 기대 | 실제 결과 및 깨달음 |
| 코드 작성 | 내가 직접 타자를 쳐야 할 줄 알았음 | AI가 100% 작성해 주며, 나는 복사/붙여넣기만 수행 |
| 로직 이해 | 문법을 이해 못 하면 작동시킬 수 없을 것이라 걱정 | HTML(뼈대), CSS(디자인), JS(기능)의 역할 분담만 알아도 충분함 |
| 디자인 퀄리티 | 처음부터 화려하고 완벽한 사이트가 나올 줄 기대 | 투박하고 밋밋한 초기 버전이 나옴. 지속적인 수정(디버깅)이 필수임을 깨달음 |
결론: 투박한 첫걸음, 그리고 시작된 디테일의 욕심
첫 번째 로또 번호 생성기는 기능적으로는 완벽하게 작동했지만, 솔직히 디자인은 무미건조했고 사용자들을 훅(Hook) 끌어당길 만한 매력은 부족했습니다. 제목도 단순히 ‘로또 번호 생성’이었고, 공의 색깔도 단조로웠습니다.
하지만 첫 성공의 경험은 저에게 엄청난 도파민을 분비시켰습니다. “버튼이 작동하네? 그럼 제목을 더 그럴듯하게 바꿔달라고 해볼까?”, “버튼을 눌렀을 때 그냥 숫자가 나오는 게 아니라, 뭔가 숨겨진 기운을 분석하는 척하는 문구를 넣으면 사람들이 더 재밌어하지 않을까?”
코딩의 벽을 넘어서자, 마침내 ‘기획자’로서의 본능과 욕심이 꿈틀대기 시작한 것입니다. 다음 편에서는 이 밋밋한 초기 버전의 추첨기를 대대적으로 뜯어고치며, 사소한 텍스트 하나로 유저의 감성을 자극하는 UI/UX 개선 작업과 롤백(Roll-back)의 묘미에 대해 이야기해 보겠습니다.