당첨번호 강조하고 밝은 가족톤으로 로또 UI 전면 개선

로또 서비스를 완전히 새로운 옷으로 갈아입혔다. 기존의 딱딱하고 어두운 "AI팜룩"에서 벗어나 라이트한 가족톤으로 전체 디자인을 재구성했다.

왜 리뉴얼을 결정했나

처음 로또 서비스를 만들 때는 "정확하고 신뢰할 수 있어야 한다"는 요구사항이 있었다. 그래서 무의식적으로 차갑고 하이테크한, 마치 AI가 거대 계산으로 뭔가 하는 듯한 느낌의 디자인을 택했다. 검은 배경, 미니말한 인터페이스, 딱딱한 피드백 시각들.

하지만 로또는 원래 긍정적이고 희망적인 서비스다. 당첨을 꿈꾸고, 행운을 노리는 사용자들의 감정을 담아야 한다. 어두운 톤은 오히려 불안감을 주고, 차가운 UI는 진입장벽이 됐다. 또한 우리 타겟은 전 연령층인데, 특히 가족 단위로 함께 쓸 수 있어야 한다는 의견이 팀에서 계속 나왔다. 신뢰감을 바탕으로 하되, 따뜻함과 친근함을 더 해야 한다는 결론이었다.

무엇을 어떻게 바꿨나

변경은 광범위했다. 먼저 public/styles.css에서 전체 색상 팔레트와 타이포그래피를 재정의했다. 기존의 고명도 회색·검은색 주조에서 따뜻한 베이지, 라이트 오렌지, 밝은 회색으로 전환했다. 패딩과 마진도 늘려서 숨을 쉴 수 있는 여백을 확보했다.

컴포넌트 레이어도 손을 많이 봤다:

특히 주목할 변경은 PostCard.astro다. 기존에는 당첨번호가 카드 중간 어딘가 묻혀 있었다. 이번에는 최상단, 가장 큰 폰트로, 컬러풀한 강조 배경으로 눈에 띄게 했다. 사용자가 이 페이지에 들어왔을 때 "아, 내가 봐야 할 당첨번호가 여기구나"를 즉각 인식하도록 UX 우선순위를 다시 정렬한 셈이다.

기술적 안전장치와 단계적 진행

컴포넌트 기반 Astro 구조에서 전면 리뉴얼은 조심스러웠다. 한 번의 실수가 전체 레이아웃을 깨뜨릴 수 있으니까.

작업 중에 챙긴 것들:
- 기존 PostCard.astro를 PostCard.astro.bak2로 백업해두고 진행 (.bak2는 여러 시행착오를 거친 흔적)
- CSS 색상을 먼저 변수로 정의한 뒤, 각 컴포넌트에서 참조하도록 구조화
- 모바일·데스크톱 반응형 동시 검증 (라이트톤이라고 가독성까지 희생하면 안 됨)

이런 류의 전체 스타일 리팩토링에서는 버전 관리와 단계적 검증이 핵심이다. 한 번에 다 밀어붙이면 롤백이 복잡해지고, 문제가 생겼을 때 원인 파악이 어렵다. 각 컴포넌트마다 변경의 이유와 예상 효과를 문서화해둔 것도 나중에 유지보수할 때 큰 도움이 된다.

마무리

"AI팜룩 탈피"는 단순한 미학적 결정이 아니었다. 서비스의 정체성을 다시 정의하는 작업이었다. 로또는 정밀한 알고리즘 서비스가 아니라, 모든 사람이 함께할 수 있는 따뜻한 경험이어야 한다는 철학을 담아냈다. 신뢰성을 잃지 않으면서도 접근성과 감정적 안정감을 높이는 방향으로 판단했다. 기술 팀이 디자인을 주도하면서도 사용자 감정과 가독성을 놓치지 않으려는 노력이 반영된 결과다.

🛒 이 글과 어울리는 추천 상품

• 사무의자 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.