팔자마을 3D 한옥 마을 운세 서비스 > 포트폴리오

팔자마을은 클라이언트가 의뢰한 사주·운세 서비스로, 귀여운 미니어처 한옥 마을을 걸어 다니며 운세를 보는 웹 서비스로 기획하였습니다.
기존 운세 서비스는 결과가 목록으로만 나열되어 매일 다시 열어 볼 이유가 약하다고 판단하였습니다.
그래서 화면 자체를 하나의 마을로 만들고, 운세와 타로가 그 안의 장소가 되도록 설계하였습니다.

'걸어 다니는 3D 마을', '근거를 보여 주는 풀이', '입구를 낮춘 맛보기' 세 가지를 전략의 축으로 잡았습니다.
마을은 Blender로 직접 3D 모델링하고 웹에서 실시간 렌더링하여, 앱 설치 없이도 장면이 살아 있도록 하였습니다.
풀이에는 계산 기준과 불확실성을 숨기지 않고 보여 주는 방향으로 설계하였습니다.

'쉽게', '귀엽게', '정확하게'를 UX/UI 원칙으로 선언하였습니다.
쉽게는 터치 영역 44px 이상과 해요체 안내로, 귀엽게는 단색 툰 셰이딩과 둥근 UI로, 정확하게는 역법과 절기를 공공 천문 자료와 대조해 검증하는 것으로 구체화하였습니다.
세 원칙이 3D 장면과 일반 화면 모두에서 같은 톤으로 이어지도록 색과 카드 구조를 맞추었습니다.

메인은 메뉴 목록 대신 3D 한옥 마을이 첫 화면이 되도록 구성하였습니다.
사주당, 우물, 담벼락 같은 장소에는 말풍선을 띄워 누르면 해당 화면으로 이어지게 하였고, NPC와 동무 펫이 말풍선으로 오늘의 한마디를 건네도록 구현하였습니다.
회원이 아니어도 생년월일만 넣어 바로 결과를 볼 수 있는 맛보기 카드를 같은 화면에 두었습니다.

한옥, 장터 골목, 소품, NPC, 동무 펫까지 모든 3D 모델링을 Blender 헤드리스 스크립트(Python)로 절차적으로 구현하였습니다.
건물과 소품, 캐릭터마다 이름 규칙(Bld_, Npc_, Anc_ 등)을 정해, 웹 코드가 같은 이름으로 등불을 켜고 말풍선 위치를 잡을 수 있게 하였습니다.
스크립트라서 수정 후 한 번에 다시 내보낼 수 있었고, 정점색 AO를 구워 텍스처 없이도 입체감을 확보하였습니다.

모바일 웹에서도 3D가 가볍도록 glb를 meshopt로 압축해 4종 4.9MB를 2.7MB로 줄였고, 같은 재질의 정적 메시를 합쳐 장터 드로우콜을 646에서 273으로 낮추었습니다.
글꼴은 필요한 글자 조각만 받는 방식으로 바꿔 2.18MB를 0.56MB로 줄였고, 그 결과 첫 로딩 전송량도 4.48MB에서 1.99MB가 되었습니다.
굽기 AO와 바닥 질감 같은 룩업 효과는 용량 증가 10% 이내라는 예산을 두고 적용하였습니다.

시간대 4단계(아침·낮·노을·밤)와 맑음·비·눈 같은 날씨, 계절에 따라 하늘색과 조명, 등롱 글로우, 비·눈 입자, 젖은 바닥과 눈 쌓임이 실시간 렌더링으로 바뀌도록 three.js로 구현하였습니다.
바닥 질감은 텍스처 없이 셰이더로 만들어 타일 반복이 보이지 않게 했고, 연못 수면에는 물결 셰이더를 입혔습니다.
동작 줄이기 설정에서는 정지 화면으로, WebGL이 없는 기기에서는 장소 목록으로 대체되도록 하였습니다.

타로 카드 섞기, 행운 번호 추첨기, 포춘쿠키 깨기처럼 결과를 받는 순간을 3D 연출로 설계하였습니다.
세 연출이 하나의 공용 모듈 위에서 돌아가도록 만들었고, 건너뛰기와 동작 줄이기에서는 연출을 곧바로 끝 자세로 보내 결과를 먼저 읽을 수 있게 하였습니다.
결과 카드는 서버가 먼저 그려 두어, 3D가 실패해도 풀이는 그대로 보이도록 구현하였습니다.

허브의 '오늘 한눈에'는 쪽지, 별점, 행운 시간, 행운색을 카드 한 장씩으로 나눠 매일 열어도 필요한 것만 읽히도록 구성하였습니다.
사주 결과는 한눈에·관계·삶의 흐름 같은 장으로 나누고 용어마다 설명 말풍선을 붙였으며, 궁합은 사주·별자리·혈액형 세 방식을 탭으로 비교할 수 있게 하였습니다.
계산 근거를 열어 볼 수 있는 정밀 증명 패널도 함께 설계하였습니다.

이사 택일은 기간과 목적을 고르면 후보 날짜 5곳을 근거와 함께 보여 주도록 구현하였습니다.
이름 붓방(작명)은 성과 한자부터 확인하는 단계별 입력으로 만들었고, 절기 마당은 절기 시각과 3일 의식 같은 계절 콘텐츠를 담았습니다.
세 화면 모두 같은 카드 구조와 해요체 문장으로 맞춰, 마을 안의 한 장소처럼 느껴지도록 디자인하였습니다.

타인의 생일과 관계를 다루는 서비스라서 저장, 가족 표시, 외부 공유, 알림을 서로 다른 동의로 나누는 목적별 동의 구조를 설계하였습니다.
초대 궁합에서는 상대의 생년월일이 나에게 보이지 않고 결과만 공유되도록 구현하였습니다.
접근성은 WCAG 2.1 AA를 기준으로 터치 영역 44px, 글자 대비, 확대 허용, 동작 줄이기를 지켰고 axe-core로 자동 점검하였습니다.

모바일은 390px 폭을 기준으로 다시 설계하였습니다. 소개 카드는 접힌 한 줄 시트로, 하늘 바꾸기는 바텀 시트로 옮기고 말풍선이 고정 UI와 겹치면 숨기도록 하였습니다.
모바일에서는 렌더 해상도 상한과 그림자 필터를 낮추고, 프레임 시간이 길어지면 해상도를 단계적으로 내리는 방식으로 부드러움을 지켰습니다.
헤더 메뉴는 시트로 정리해 한 손 조작을 고려하였습니다.