웹 개발을 처음 시작할 때 가장 큰 고민은 “무엇을 만들 것인가?”입니다. 거창한 아이디어를 떠올리다 지레 포기하기보다는, 일상에서 가볍게 즐길 수 있는 작고 재미있는 도구부터 시작하는 것이 최고의 학습법입니다.
오늘은 저의 첫 웹 기반 사이드 프로젝트이자, 순수 HTML과 JavaScript로 뼈대를 다지게 해준 ‘행운 가득 로또 기운 생성기’의 제작 과정을 되짚어 보려고 합니다.
1. 기획: 단순한 난수 생성을 넘어 ‘경험’을 디자인하다
처음 아이디어는 아주 단순했습니다. 1부터 45까지의 숫자 6개를 무작위로 뽑아주는 가벼운 유틸리티를 웹페이지에 띄워보자는 것이었죠. 하지만 시중에는 이미 수많은 로또 번호 추첨기가 있었습니다.
차별화를 위해 고민하던 중, 기능적인 딱딱함을 버리고 감성적인 접근을 시도하기로 했습니다. 단순히 기계적으로 번호를 뱉어내는 툴이 아니라, 버튼을 누르는 순간 긍정적인 에너지를 받을 수 있는 도구를 만들고 싶었습니다.
그렇게 평범했던 ‘웹 로또 유틸리티’라는 이름을 버리고, ‘행운 가득 로또 기운 생성기’라는 타이틀을 확정하게 되었습니다.
2. 개발 과정: 무거운 프레임워크 없이 기본기로 승부하기
이 프로젝트의 핵심은 ‘가벼움’이었습니다. 무거운 라이브러리나 백엔드 서버 없이, 오직 프론트엔드 언어 3대장(HTML, CSS, JavaScript)만으로 원페이지 화면을 구성했습니다.
-
HTML (구조): 화면 중앙에 6개의 숫자가 들어갈 동그란 공 모양의 영역을 만들고, 하단에 기운을 불어넣을 직관적인 버튼을 배치했습니다.
-
CSS (디자인): 사용자가 시각적으로 편안함을 느낄 수 있도록 깔끔한 배경색을 지정하고, 숫자가 표시되는 공에 가벼운 그림자 효과(Box-shadow)를 주어 입체감을 살렸습니다.
-
JavaScript (핵심 로직): 버튼을 클릭하면
Math.random()함수를 사용해 1부터 45 사이의 숫자를 뽑습니다. 이때 같은 숫자가 중복으로 나오지 않도록 배열(Array)과 반복문을 활용해 검증하는 로직을 꼼꼼하게 구현했습니다.
3. 디테일의 차이: 단순한 번호 뽑기를 넘어선 ‘경험’의 확장
기본적인 무작위 번호 추출 로직을 완성한 뒤, 저는 이 웹 툴이 건조한 난수 생성기에 머물지 않고 사용자에게 진짜 ‘행운’과 ‘재미’를 주는 서비스로 기억되길 바랐습니다. 그래서 툴의 완성도와 몰입감을 극대화하기 위해 다음과 같은 5가지 디테일한 요소를 추가로 구현했습니다.
-
만져서 기운 받는 디지털 부적 효과: 사용자가 화면을 터치하는 순간, 전체 화면이 좋은 기운을 받는 것처럼 번쩍이는 시각적 애니메이션을 적용했습니다. 이와 함께 하단에 “만사형통(萬事亨通) 일확천금(一攫千金)의 기운을 담았습니다.”라는 텍스트가 나타나도록 하여, 클릭 한 번에도 긍정적인 심리적 경험을 선사했습니다.
-
AI 정밀 분석 대시보드 연동: 단순히 번호 6개를 던져주고 끝내는 것이 아니라, 첨부된 이미지처럼 생성된 번호의 통계적 가치를 분석해 주는 UI를 하단에 배치했습니다. 100점 만점 기준의 종합 점수와 함께 번호 합계, 홀짝 밸런스(예: 4:2), 고저 비율, 연속 번호 존재 여부 등을 직관적으로 보여주어, 사용자에게 분석적인 재미와 신뢰감을 대폭 끌어올렸습니다.
-
동행복권 공식 당첨 데이터 호출: 웹 툴의 현실성과 신뢰도를 높이기 위해, 이전 회차의 실제 당첨 번호를 동행복권 공식 데이터에서 직접 불러와 화면에 함께 띄워주도록 구현했습니다.
-
재미로 보는 로또의 역사 페이지 구성: 사용자가 단순히 숫자만 뽑고 이탈하는 것을 방지하고 더 풍성한 즐길 거리를 제공하기 위해, 로또의 유래와 흥미로운 역사적 사실들을 가볍게 읽어볼 수 있는 별도의 지식 페이지를 추가했습니다.
-
명확한 당첨 기준 및 이용 안내 명시: 로또를 처음 접하는 사람도 쉽게 룰을 이해할 수 있도록 로또 6/45의 정확한 등수별 당첨 기준과 이용 주의사항을 깔끔하게 정리하여 하단에 배치했습니다.
- 배경 음악을 깔아서 보는 시각에서 공간이 느껴지게 구성 : 서비스를 마무리하는 디테일로, 단순히 로또 번호만 가지고가는게 아닌 공간을 느끼고 갈수있게 배경음악을 추가하였습니다.
4. 첫 프로젝트가 남긴 의미
‘행운 가득 로또 기운 생성기’는 기술적으로 엄청나게 복잡한 서비스는 아닙니다. 하지만 이 작은 프로젝트는 저에게 웹 개발의 전체 사이클을 경험하게 해준 소중한 마중물이 되었습니다.
-
내가 짠 코드가 브라우저에서 어떻게 시각화되는지 확인했고,
-
웹 페이지를 내 서버에 올려 다른 사람과 링크로 공유하는 법을 배웠으며,
-
이후 데이터 분석 트래커나 기계 설계 공차 계산기 같은 더 고도화된 웹 툴을 개발할 수 있는 구조적 뼈대를 잡게 되었습니다.
무언가 새로운 것을 배우고 싶다면, 지금 당장 메모장을 열고 일상의 아주 작은 호기심부터 코드로 구현해 보세요. 그 작은 시작이 여러분만의 강력한 무기가 될 것입니다.