개발자의 입사 3주차 회고

입사 3주차(1월 19일~23일)를 회고합니다. 이번 주는 UX 개선과 다국어 처리, 그리고 데이터 표현 방식에 대해 많이 고민했던 한 주였습니다. 여전히 배울 게 많지만, 작은 디테일 하나하나가 사용자 경험에 얼마나 큰 영향을 주는지 체감한 시간이었습니다.

---

주요 작업 요약

이번 주는 UX 개선과 다국어 처리, 데이터 표현 개선 세 가지 축으로 업무가 진행되었습니다.

기능 개발 및 UX 개선

• BMS 상품 알림톡 요금 숨김 및 확정번호 표시[1]
• 카테고리 탭 이동 애니메이션 적용[2]
• 일정표 에디터 링크/아이콘 삽입 기능 추가[3]
• 예약 현황 기본값을 '접수일'로 설정[4]

데이터 표현 개선

• 관리자 캘린더 수기 예약 시 성인/아동 수량 반영[5]
• 판매점 관리자 테이블에 성인/아동 별도 표기[6]

다국어 및 레이아웃

• 중국어 번역 미작동 텍스트 개선[7]
• 모아시스 가입인사 게시판 레이아웃 조정[8]
• 기타 다수의 CSS 및 반응형 작업

---

기술적 깨달음

1. 애니메이션이 UX에 미치는 영향

카테고리 탭 이동 애니메이션[2] 작업을 하면서 애니메이션의 중요성을 새삼 깨달았습니다.

처음에는 "탭 클릭하면 내용만 바뀌면 되는 거 아닌가?"라고 생각했는데, 실제로 좌우 슬라이드 애니메이션을 추가하니 사용자가 어디로 이동했는지 훨씬 명확하게 인지할 수 있더라고요.

// 단순 교체 vs 애니메이션이 있는 전환
// 1. 탭 A → 탭 B로 갑자기 바뀜 (어색함)
// 2. 탭 A → [슬라이드 애니메이션] → 탭 B (자연스러움)

 

이 작업을 통해 배운 점:

• 방향성의 중요성: 오른쪽 탭으로 가면 왼쪽에서 오른쪽으로, 왼쪽 탭으로 가면 오른쪽에서 왼쪽으로 슬라이드되어야 직관적
• 타이밍 함수: ease-in-out 같은 타이밍 함수가 자연스러운 움직임을 만듦
• 성능 고려: 애니메이션은 transform을 사용해야 부드럽고, left나 top 같은 속성은 성능이 안 좋음
• 과하지 않게: 애니메이션 시간이 너무 길면 오히려 답답함. 0.3초 정도가 적당한 것 같음

애니메이션은 단순한 장식이 아니라 사용자가 인터페이스를 이해하는 데 도움을 주는 기능적 요소라는 걸 배웠습니다.

2. 조건부 UI와 비즈니스 로직의 복잡성

BMS 상품 알림톡[1] 작업이 가장 복잡했습니다. 같은 알림톡 화면이지만 상품 유형에 따라 다르게 보여야 했거든요.

요구사항:

• BMS 상품인 경우: 요금 안내 숨김, 확정 번호 표시
• 일반 상품인 경우: 요금 안내 표시, 확정 번호 숨김
• 확정 번호가 입력되지 않은 경우: 빈 값으로 표시

// 의사 코드
if (isBMS) {
  // 요금 안내 숨김
  if (confirmNumber) {
    // 확정 번호 표시
  } else {
    // 빈 입력란 표시
  }
} else {
  // 요금 안내 표시
}

처음에는 "그냥 조건문 하나면 되겠지"라고 생각했는데, 실제로는:

1. 데이터 구조 파악: BMS 여부를 어떤 필드로 판단하는가?
2. 중첩 조건 처리: BMS이면서 확정번호가 있는 경우, 없는 경우
3. 레이아웃 유지: 요금 안내가 숨겨져도 레이아웃이 깨지지 않게
4. 폰트 스타일 일관성: 확정번호 텍스트가 다른 정보와 일관된 스타일을 유지

이 과정에서 배운 점:

• 조건의 우선순위: 어떤 조건을 먼저 체크해야 할지 순서가 중요함
• 엣지 케이스: "BMS인데 확정번호가 null이면?", "빈 문자열이면?" 같은 경우들을 미리 고려해야 함
• 유지보수성: 조건이 복잡하면 주석이나 별도 함수로 분리하는 게 나중을 위해 좋음

3. 데이터 표현 방식의 중요성

이번 주에 성인/아동 수량을 분리해서 표기하는 작업을 두 곳에서 했습니다.

관리자 캘린더[5]에서는 수기로 예약을 추가할 때 총 인원은 맞지만 성인/아동 구분이 안 되는 버그가 있었고, 판매점 관리자 테이블[6]에서는 아예 성인/아동 구분 없이 총 인원만 표시되고 있었습니다.

// Before: 총 5명
// After: 성인 3명 / 아동 2명

단순해 보이지만 실제로는:

1. 데이터 구조 이해: 백엔드에서 adultCount, childCount를 따로 내려주는지, 아니면 계산해야 하는지
2. 기본값 처리: 아동이 0명일 때 어떻게 표시할지 ("성인 3명" vs "성인 3명 / 아동 0명")
3. 레이아웃 조정: 한 줄에 표시할지, 두 줄에 표시할지
4. 일관성: 여러 화면에서 같은 정보를 다루는데, 표현 방식이 일관되어야 함

이 작업을 통해 같은 데이터라도 어떻게 표현하느냐에 따라 사용자가 받는 정보의 질이 완전히 달라진다는 걸 배웠습니다. 관리자가 "오늘 어린이 3명 예약이 있네"라고 빠르게 파악할 수 있으려면, 데이터를 명확하게 구분해서 보여줘야 합니다.

4. 기본값의 힘

예약 현황 기본값을 '접수일'로 설정[4]하는 작업은 코드로는 몇 줄 안 되는 간단한 작업이었습니다.

// 기본 정렬 기준을 '접수일'로 변경
defaultSort: 'receiptDate'

하지만 이 작은 변경이 판매점 관리자의 업무 효율에는 큰 영향을 줍니다.

Before: 페이지 열 때마다 정렬 기준을 '접수일'로 바꿔야 함

After: 페이지 열면 바로 최신 접수 순으로 정렬되어 있음

이 작업에서 배운 점:

• 사용자 워크플로우 이해: 판매점 관리자는 "오늘 들어온 예약"을 가장 먼저 확인함
• 마찰 최소화: 매번 클릭 한 번을 줄이는 것만으로도 사용자 경험이 개선됨
• 적절한 기본값: 80%의 사용자가 원하는 설정을 기본값으로 해야 함

"기본값 하나 바꾸는 게 뭐 대수냐"고 생각할 수 있지만, 좋은 기본값은 사용자가 의식하지 못하는 사이에 편의를 제공합니다.

5. 다국어 처리의 까다로움

중국어 번역 미작동 텍스트[7] 개선 작업을 하면서, 다국어 처리가 단순히 "텍스트만 바꾸면 되는 거"가 아니라는 걸 다시 한번 느꼈습니다.

문제가 발생한 부분들:

1. 모달 메시지 ("닫으시겠습니까?", "신청하시겠습니까?")
2. 개인정보 동의 항목
3. 페이지 위젯 명칭
4. 위챗 ID 복사 영역
5. 병원명 및 주소

발견한 패턴:

• 하드코딩된 텍스트: 번역 함수를 거치지 않고 직접 한글로 작성된 부분들
• 조건부 번역: 특정 조건에서만 번역이 안 되는 경우
• 동적 텍스트: API에서 받아온 텍스트가 번역되지 않는 경우

이 과정에서 배운 점:

• 번역 키 관리: 모든 사용자 대면 텍스트는 번역 키로 관리해야 함
• 테스트의 중요성: 언어를 바꿔가며 모든 화면을 확인해봐야 누락된 부분을 발견할 수 있음
• 일관성: 같은 의미의 텍스트는 같은 번역 키를 사용해야 일관성 유지

다국어 처리는 처음부터 설계되어야 하는 부분이고, 나중에 추가하려면 많은 부분을 수정해야 한다는 걸 배웠습니다.

6. 에디터 커스터마이징

일정표 에디터에 링크/아이콘 삽입 기능 추가[3] 작업을 하면서, 라이브러리를 "있는 그대로 쓰는 것"과 "필요에 맞게 확장하는 것"의 차이를 느꼈습니다.

요구사항은 간단했습니다:

1. 에디터 툴바에 "링크 삽입" 버튼 추가
2. 에디터 툴바에 "아이콘 삽입" 버튼 추가

하지만 실제로는:

• 에디터 API 이해: 툴바에 버튼을 추가하는 방법
• 이벤트 핸들링: 버튼 클릭 시 링크 입력 다이얼로그 표시
• 커서 위치: 현재 커서 위치에 링크/아이콘 삽입
• 스타일 일관성: 새로 추가한 버튼이 기존 버튼들과 동일한 스타일을 유지

특히 커서 위치에 삽입하는 부분이 까다로웠습니다. 에디터의 내부 상태를 이해하고, 적절한 메서드를 찾아서 사용해야 했거든요.

이 작업을 통해:

• 라이브러리의 공식 문서를 꼼꼼히 읽는 것의 중요성
• 에디터 같은 복잡한 컴포넌트는 내부 동작 원리를 어느 정도 이해해야 커스터마이징이 가능함
• 작은 기능 추가도 에디터 전체의 동작에 영향을 줄 수 있으니 테스트가 중요함

을 배웠습니다.

---

아쉬웠던 점

1. 조건부 로직의 테스트 부족

BMS 알림톡 작업에서 "BMS인 경우"와 "아닌 경우"는 테스트했는데, "BMS인데 확정번호가 빈 문자열인 경우", "null인 경우" 등 세부적인 케이스를 충분히 테스트하지 못했습니다. 다행히 큰 문제는 없었지만, 좀 더 꼼꼼하게 엣지 케이스를 체크했어야 했습니다.

2. 애니메이션 성능 고려 부족

탭 애니메이션을 구현할 때 처음에는 left 속성을 사용했는데, 나중에 찾아보니 transform: translateX()를 쓰는 게 성능상 더 좋다는 걸 알았습니다. 다행히 바로 수정했지만, 처음부터 성능을 고려했으면 더 좋았을 것 같습니다.

3. 다국어 누락 체크리스트

중국어 번역 누락을 찾는 과정이 "눈으로 하나하나 확인"하는 방식이었습니다. 더 체계적으로 번역 누락을 찾을 수 있는 도구나 방법이 있는지 찾아보고 싶습니다. 예를 들어, 한글 텍스트를 자동으로 찾아주는 스크립트 같은 것 말이죠.

---

느낀 점

디테일이 만드는 차이

이번 주 작업들은 대부분 "작은 개선"들이었습니다. 탭에 애니메이션 추가, 성인/아동 구분 표시, 기본값 변경... 하나하나는 작아 보이지만, 이런 디테일들이 모여서 사용자가 느끼는 "완성도"를 만든다는 걸 배웠습니다.

• 애니메이션 하나가 "어디로 이동했는지" 명확하게 만들고
• 데이터 구분이 "얼마나 빨리 정보를 파악할 수 있는지" 결정하고
• 기본값 하나가 "매일 몇 번씩 하던 클릭"을 줄여주고

"대충 작동하는 기능"과 "잘 만들어진 기능"의 차이는 바로 이런 디테일에 있다는 걸 느꼈습니다.

사용자 입장에서 생각하는 연습

예약 현황 기본값을 바꾸는 작업을 하면서, "판매점 관리자는 어떤 순서로 일을 할까?"를 고민했습니다. 그들은 아침에 출근해서 "오늘 새로 들어온 예약"을 먼저 확인할 것이고, 그렇다면 접수일 순 정렬이 기본값이어야 합니다.

이렇게 사용자의 워크플로우를 상상해보는 것이 좋은 UX를 만드는 출발점이라는 걸 배웠습니다. 내가 편한 대로가 아니라, 사용자가 편한 대로 만들어야 한다는 것.

문제 해결 과정의 즐거움

중국어 번역 누락을 찾아서 하나하나 고치는 과정이 처음에는 지루할 줄 알았는데, 의외로 재미있었습니다. 마치 숨은 그림 찾기처럼 "여기도 한글이 남아있네", "이건 조건부로 번역이 안 되는 거였구나" 하며 패턴을 찾아가는 과정이 흥미로웠습니다.

버그를 찾고 고치는 것도 일종의 문제 해결이고, 그 과정 자체를 즐길 수 있다면 개발이 훨씬 즐거워지는 것 같습니다.

---

다음 주 목표

1. 애니메이션 성능 학습: CSS 애니메이션 최적화 기법 공부하기
2. 다국어 처리 베스트 프랙티스: 번역 누락을 방지하는 방법 찾아보기
3. 엣지 케이스 체크리스트: 조건부 로직 구현 시 체크해야 할 항목 정리하기
4. 사용자 관찰: 가능하다면 실제 사용자가 시스템을 어떻게 사용하는지 관찰해보기

---

3주차를 지나며, "작동하는 코드"를 넘어 "좋은 경험을 주는 코드"에 대해 고민하게 되었습니다.

아직 갈 길이 멀지만, 하나씩 배워가는 과정이 즐겁습니다. 다음 주에도 디테일에 집중하며 성장하는 한 주가 되었으면 좋겠습니다..!