← 포트폴리오 목록
탭사주
가방 키링(참)에 내장된 NFC 태그를 스마트폰으로 태그하면 별도 앱 설치 없이 모바일 웹으로 접속해 생년월일시를 입력하고, AI API 기반으로 생성한 사주·운세 결과를 한/중/일/영 4개 언어로 확인할 수 있는 서비스를 React + Node.js 기반으로 설계·구현합니다.
NDEF 기반 원터치 접속 구조 구현NFC NDEF URL 레코드와 세션 토큰을 연계해 앱 설치 없이 1회 태그로 서비스 진입이 가능한 구조를 설계합니다.
AI 사주 결과 캐싱 파이프라인 설계생년월일시 조합별 AI API 응답을 PostgreSQL에 캐싱해 동일 조건 재조회 시 즉시 응답하는 구조를 구현합니다.
이중 다국어 처리 구조 구축정적 UI 텍스트(i18next)와 AI 생성 콘텐츠(번역 API)를 분리 처리하는 4개 언어 지원 구조를 설계합니다.
Overview
프로젝트 개요
가방 키링(참)에 내장된 NFC 태그를 스마트폰으로 태그하면 별도 앱 설치 없이 모바일 웹으로 접속해 생년월일시를 입력하고, AI API 기반으로 생성한 사주·운세 결과를 한/중/일/영 4개 언어로 확인할 수 있는 서비스를 React + Node.js 기반으로 설계·구현합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
생년월일시 조합별로 달라지는 사주 해석을 AI 프롬프트로 구조화해 일관된 카테고리(총운·애정운·재물운) 응답을 유도하는 설계가 필요합니다
NFC 태그 인식이 기기·브라우저별로 다르게 동작할 수 있어
URL 직접 접속 폴백 경로를 함께 준비하는 대응이 필요합니다
AI 번역 API로 생성한 다국어 운세 콘텐츠가 언어별로 뉘앙스 차이가 생기지 않
번역 캐시와 검수 흐름을 함께 설계할 필요가 있습니다
음력/양력 변환이 필요한 생년월일 입력값을 사주 계산 로직에 정확히 반영하기 위한 변환 테이블 검증이 필요합니다
구현 내용
핵심 기능 상세
핵심 기능 1
NFC 태그 접속
사용자가 스마트폰을 가방 키링 NFC 칩에 태그하면 NDEF URL 레코드를 통해 별도 앱 설치 없이 모바일 웹으로 자동 접속합니다
핵심 기능 2
생년월일시 입력
연·월·일·시를 단계별로 입력받는 심플한 폼으로 사주 계산에 필요한 정보를 빠르고 정확하게 수집합니다
핵심 기능 3
AI 운세 결과 확인
입력된 생년월일시를 기반으로 AI API가 생성한 사주·운세 콘텐츠를 카드 형태로 제공합니다
핵심 기능 4
다국어 전환
한국어·영어·중국어·일본어 4개 언어로 운세 결과와 UI 전체를 전환할 수 있는 다국어 지원 기능입니다
구현 과정
프로젝트 진행 단계
STEP 1
NDEF 태그 접속 및 세션 구조 설계
NFC NDEF URL 리디렉션 흐름과 세션 토큰 발급 구조를 설계하고 랜딩 화면을 구현합니다.
STEP 2
생년월일시 입력 폼 및 검증 로직 개발
React Hook Form + Zod 기반 휠 피커 입력 컴포넌트와 음력/양력 변환 로직을 구현합니다.
STEP 3
AI 운세 결과 생성 파이프라인 구축
AI API 프롬프트 설계, 결과 캐싱, 카테고리별 카드 렌더링 컴포넌트를 구현합니다.
STEP 4
다국어 전환 및 통합 테스트
i18next 다국어 UI와 AI 번역 연동을 완료하고 4개 언어 전환 시나리오를 검증합니다.
프로젝트 성과
주요 성과
NDEF 기반 원터치 접속 구조 구현NFC NDEF URL 레코드와 세션 토큰을 연계해 앱 설치 없이 1회 태그로 서비스 진입이 가능한 구조를 설계합니다.
AI 사주 결과 캐싱 파이프라인 설계생년월일시 조합별 AI API 응답을 PostgreSQL에 캐싱해 동일 조건 재조회 시 즉시 응답하는 구조를 구현합니다.
이중 다국어 처리 구조 구축정적 UI 텍스트(i18next)와 AI 생성 콘텐츠(번역 API)를 분리 처리하는 4개 언어 지원 구조를 설계합니다.
Review
기술적 주안점
- NDEF URL 기반 원터치 접속 구조를 구현하여 별도 앱 설치나 로그인 없이 태그 한 번으로 서비스 진입이 가능하도록 설계합니다
- 모바일 터치 환경에 최적화된 휠 피커 입력 컴포넌트를 자체 구현하여 소수의 탭만으로 생년월일시 입력을 완료할 수 있는 구조를 설계합니다
- AI API 응답을 카테고리별 구조화 데이터로 파싱해 시각적 카드 UI로 재구성하는 결과 렌더링 파이프라인을 구현합니다
