안녕하세요! 어느덧 자바스크립트 미니 프로젝트 시리즈가 일곱 번째 시간에 접어들었습니다.
그동안 [계산기]나 [그림판]처럼 복잡한 로직과 UI를 가진 앱들을 만들어오면서, 가끔은 ‘가장 단순한 기능이 가장 큰 울림을 줄 때가 있다’는 생각을 하곤 했습니다. 그래서 오늘은 아주 클래식하지만, 어떻게 구현하느냐에 따라 서비스의 퀄리티가 천차만별로 달라지는 ‘자바스크립트 랜덤 명언 생성기’를 준비해 보았습니다.
이번 프로젝트에서 제가 집중한 포인트는 ‘데이터의 구조적 관리’와 ‘사용자가 느끼는 시각적 흐름’입니다. 텍스트가 바뀔 때 화면 전체의 테마가 부드럽게 전환되는 경험, 그리고 수많은 데이터를 확장성 있게 관리하는 객체 배열의 활용법까지 추가하여 작성하였습니다.
1. 시작하기 전 고민
‘랜덤 명언 생성기’는 겉보기에는 매우 간단한 로직처럼 보입니다. 하지만 저는 이번 프로젝트에서 두 가지 심화 목표를 세웠습니다. 첫 번째는 데이터의 객체화(Object)를 통한 관리 효율성이고, 두 번째는 시각적 트랜지션(Transition)을 활용한 사용자 경험의 개선입니다.
단순히 document.write로 글자만 바꾸는 것이 아니라 사용자가 버튼을 눌렀을 때 화면이 뚝뚝 끊기지 않고, 마치 명언의 분위기에 맞춰 공간 전체가 변화하는 듯한 느낌을 주면 좋겠다는 생각을 하였습니다. 이를 위해 명언 데이터와 함께 그에 어울리는 테마 색상을 별도의 배열로 관리하여, 로직이 실행될 때마다 배경색과 텍스트가 동시에 동기화되도록 설계했습니다.
텍스트를 화면에 동적으로 뿌려주는 이 방식은 [자바스크립트 타이핑 측정기]의 문장 출력 로직과도 일맥상통합니다.
2. Math.random()과 데이터 인덱싱
자바스크립트 랜덤 명언 생성기에서 사용할 함수는 Math.random()입니다. 하지만 이 함수는 0과 1 사이의 난수를 반환하기 때문에, 우리가 가진 배열의 길이에 맞춰 가공하는 과정이 필수적입니다.
// 핵심 로직: 배열의 길이에 유동적으로 대응하는 인덱스 추출
const quoteIndex = Math.floor(Math.random() * quotes.length);
const colorIndex = Math.floor(Math.random() * colors.length);
// 선택된 데이터를 DOM에 반영
const selectedQuote = quotes[quoteIndex];
document.body.style.backgroundColor = colors[colorIndex];여기서 Math.floor를 사용하는 이유는 배열의 인덱스가 반드시 정수여야 하기 때문입니다. quotes.length를 곱해줌으로써 나중에 명언 데이터를 10개에서 100개로 늘리더라도 코드를 일일이 수정할 필요가 없는 확장성 있는 코드를 작성했습니다. 초보자분들이 흔히 하는 실수 중 하나가 인덱스 번호를 하드코딩(직접 입력)하는 것인데, 이렇게 전체 길이를 활용하는 습관을 들이면 대규모 데이터를 다룰 때 매우 유리합니다.
3. 비동기적 연출을 위한 setTimeout 활용
구현 과정에서 텍스트가 순식간에 바뀌니 시각적으로 너무 투박하다는 느낌을 받았습니다. 이를 해결하기 위해 CSS의 opacity 속성과 자바스크립트의 setTimeout 함수를 조합했습니다.
버튼을 누르는 순간 텍스트의 투명도를 0으로 만들어 잠시 숨겼다가, 약 0.3초 뒤에 새로운 명언으로 교체하고 다시 투명도를 1로 올리는 방식입니다. 이 짧은 찰나의 ‘페이드 인-아웃(Fade in-out)’ 효과 덕분에 전체적인 서비스의 퀄리티가 훨씬 고급스러워졌습니다. 로직 자체는 짧지만, 이러한 디테일이 모여 사용자가 느끼는 ‘완성도’를 결정한다는 점을 다시 한번 깨달았습니다.
4. 왜 객체 배열인가요?
혹시 코딩을 시작한 지 얼마 안 된 분들이라면 왜 명언 따로, 저자 따로 변수를 만들지 않고 { text: “…”, author: “…” } 처럼 중괄호로 묶었는지 궁금하실 수 있습니다. 이것을 우리는 ‘객체(Object)’라고 부릅니다.
// 1. 데이터 설계: 객체 배열 형태의 명언 리스트
const quotes = [
{ text: "실패는 옵션이다. 만약 실패하고 있지 않다면, 당신은 충분히 혁신하고 있지 않은 것이다.", author: "일론 머스크" },
{ text: "위대한 일을 하는 유일한 방법은 당신이 하는 일을 사랑하는 것이다.", author: "스티브 잡스" },
{ text: "오늘의 나를 만든 것은 내가 가진 지식이 아니라 내가 가진 질문들이다.", author: "알베르트 아인슈타인" },
{ text: "코드 한 줄을 쓸 때마다 세상이 조금씩 변한다고 믿어라.", author: "익명의 개발자" },
{ text: "모든 성취의 출발점은 갈망이다.", author: "나폴레온 힐" },
{ text: "가장 뛰어난 예언자는 과거다.", author: "바이런" }
];
현업에서는 수천 개의 데이터를 다룹니다. 이때 명언과 저자가 짝을 잃어버리지 않게 하나로 묶어 관리하는 것은 데이터 무결성을 위해 매우 중요합니다. 이번 예제처럼 작은 프로젝트에서부터 데이터를 구조화하는 연습을 해보신다면, 나중에 API를 호출하거나 복잡한 DB를 다룰 때 훨씬 쉽게 적응하실 수 있을 거예요.
5. 보완점 및 향후 발전 방향
자바스크립트 랜덤 명언 생성기에서는 현재는 제가 직접 입력한 로컬 데이터를 사용하고 있지만, 실제 서비스라면 외부 API를 연결해 매번 수만 가지의 명언을 실시간으로 가져오는 방식으로 확장할 수 있습니다.
- API 연동: fetch API를 사용해 공공 명언 데이터베이스 호출하기.
- 공유 기능: 마음에 드는 명언을 이미지로 저장하거나 SNS에 바로 공유하는 기능 추가.
- 로컬 스토리지: 사용자가 ‘좋아요’를 누른 명언만 따로 모아볼 수 있는 즐겨찾기 기능.
6. 자바스크립트 랜덤 명언 생성기 실행 화면
단순한 랜덤 생성기였지만, 그 안에서 데이터 구조를 고민하고 UX를 개선하는 과정은 결코 단순하지 않았습니다. 개발은 언제나 ‘작동하는 것’에서 시작해 ‘어떻게 하면 더 좋게 작동할 것인가’를 고민하는 과정인 것 같습니다.
단순히 배열에서 데이터를 뽑아오는 것을 넘어, 새로고침할 때마다 배경색도 함께 바뀌도록 로직을 확장해 보았습니다. DOM 요소를 선택하고 텍스트와 스타일을 동적으로 변경하는 과정은 자바스크립트의 가장 기본이면서도 중요한 핵심입니다. 나중에는 외부 API를 연결해 실제 명언 데이터를 받아오는 방식으로 업그레이드해 볼 계획입니다.
일곱 번째 프로젝트까지 오면서 느끼는 점은, 기본기가 탄탄할수록 응용의 폭이 무궁무진해진다는 것입니다. 여러분도 여러분만의 문장과 색상을 담은 나만의 명언 생성기를 만들어 보세요! 궁금한 점이나 코드 개선 아이디어가 있다면 언제든 댓글 환영합니다.