사주 AI 웹서비스 제작노트 - 1

사주 AI 웹서비스를 첫 API 프로젝트로 시작한 이유

 
저번글에 이어서 추가로 써보는 제작노트
 
서버에 배포하기전에 홈화면을 조금 수정했다.
 
기존의 달력 UI는 모바일에서 날짜를 선택할 때
탭 오차가 잦고,
80~90년대생 사용자가 본인의 생년을 찾으려면
스크롤을 한참 위로 올려야 하는 번거로움이 있었다.
물론 숫자입력도 가능하긴 한데
그게 눈으로 바로 보이는게 아니라서
이를 해결하기 위해 드롭다운과 직접입력,
휠 방식으로 변경하였다.

찐망고 사주풀이 테스트화면

 
 
사주를 보고 싶어도 태어난 시를 몰라 이탈하는 사용자가 있을까봐 시간 모름 옵션을 배치했음

찐망고 사주풀이 테스트화면 시간선택

 
 
사주를 몇번봤거나 하는 분들은 시간선택을 보고
조금 이상하다 생각할 수도 있겠다 
다른 웹서비스들은 30분단위로 시간을 정렬하는데
보통 동경 135도 기준의 썸머타임이나 표준시
보정때문인 경우가 많다
 
내가 만든 웹서비스는 정각단위로 시간을 정리하는데
명리학의 본질인 지지의 시간(2시간 단위)을
오롯이 지키고자 했다.
사주는 보통 태어난 그대로를 본다
우리나라는 전통적으로 시간을 정시,
즉 2시간 단위로 끊어서 사용해왔다.

전통 시간 단위 일각, 촌각, 시진, 식경의 뜻과 의미, 12시 24시 총정리

 
단순히 UI만 바꾼 것이 아니라, 내부적으로도
유효성 검사(Validation)를 꼼꼼히 설계했는데
코드리뷰를 조금 하자면
 
1. 필수 값 체크 및 예외 처리 (isDateValid)
가장 기본단계인데 사용자가 연, 월, 일 중 하나라도 빼먹고 버튼을 눌렀을 때,
불완전한 데이터가 서버로 넘어가 에러를 일으키지 않도록 프론트엔드에서 1차로 차단했다.

const isDateValid = () => birthYear && birthMonth && birthDay;

// 만세력 보기 실행 시
if (!isDateValid()) return alert("생년월일을 모두 선택해주세요.");

 
 
 
2. 시간 모름에 대한 데이터 정형화
사용자가 '시간 모름'을 선택하면
내부적으로는 0시로 임시 계산하여
라이브러리(lunar-javascript)의 충돌을 방지함
하지만 실제 분석 API로 보낼 때는 null로 변환하여,
정확히 시주가 제외된 데이터임을 명시

const hourUnknown = birthHour === "";
const hh = hourUnknown ? 0 : Number(birthHour);

// 결과 전달 시
hour: hourUnknown ? null : eightChar.getTime(),

 
 
 
3. 입력 범위 제한 (Input Attribute)
사용자가 실수로 너무 먼 과거(1930년 이전)나
아직 오지 않은 미래의 연도를 입력하지 못하도록
HTML작업 ㅋ

<input
  type="number"
  min="1930"
  max={currentYear}
  ...
/>

 
 
 
4. 사주 분석 파라미터 필터링 (filter(Boolean))
시간 정보가 없을 경우(null),
배열에서 해당 값을 깔끔하게 제거하는 로직을 넣었음
덕분에 분석 엔진에는 Clean Data만 전달되게 함

stemElements: [year, month, day, hour].map(...).filter(Boolean),

 
 
 
배포 디데이 5일전!!