2025년 9월 25일 개발 회고록

프로젝트 개요

목표: 아토믹 디자인 패턴 기반 React + TypeScript UI 라이브러리 구축
진행 상황: Atom 단계 완료 후 Molecules/Organisms 단계 진행 중
주요 작업: 스크롤바 커스터마이징, InputWithButton Molecule 컴포넌트 구현, 폴더 구조 정리

---

🔍 발견한 문제점들

1. 스크롤바 위치 계산의 불일치

문제 상황:

// 각 약관마다 다른 계산식 사용
(42 - 21) // 이용약관
(42 - 0)  // 개인정보처리방침, 마케팅

원인 분석:

• 각 약관 컴포넌트를 독립적으로 개발하면서 일관성 없는 계산식 사용
• 스크롤바 썸의 위치 범위가 약관마다 다르게 설정됨

2. 스크롤 속도의 불일치

문제 상황:

const scrollSpeed = 1.5; // 이용약관, 개인정보처리방침
const scrollSpeed = 0.5; // 마케팅 정보 수신 동의

원인 분석:

• 각 약관의 내용 길이가 달라서 임의로 다른 속도 설정
• 사용자 경험의 일관성 부족

3. Typography 시스템의 중복

문제 상황:

.terms_Content {
  font-family: "Pretendard JP", ...; /* 중복 */
  font-weight: 400; /* 중복 */
  /* ... */
}

원인 분석:

• 기존 Typography 시스템을 무시하고 직접 폰트 속성 설정
• 아토믹 디자인 원칙 위반

4. Import 경로 오류

문제 상황:

import { InputField } from "../../atoms/wrapped/InputField/InputField";

원인 분석:

• 폴더 구조 변경 후 경로 업데이트 누락
• 상대 경로 사용으로 인한 취약성

---

시도한 해결 방법들

1. 스크롤바 위치 통일 시도

시도 1: 모든 약관을 (42 - 21)로 통일

const scrollbarPosition = (scrollPosition / maxScroll) * (42 - 21);

결과: 여전히 범위가 다름

시도 2: 모든 약관을 (42 - 0)로 통일

const scrollbarPosition = (scrollPosition / maxScroll) * (42 - 0);

결과: ✅ 성공적으로 통일됨

학습 포인트:

• 일관성 있는 계산식 사용의 중요성
• 모든 약관에서 동일한 스크롤바 범위 사용

2. 스크롤 속도 통일 시도

시도: 모든 약관을 scrollSpeed = 0.5로 통일

const scrollSpeed = 0.5;

결과: ✅ 성공적으로 통일됨

학습 포인트:

• 사용자 경험의 일관성 유지
• 내용 길이와 관계없이 동일한 스크롤 속도 사용

3. Typography 시스템 통일 시도

시도 1: terms_Content에서 폰트 속성 직접 설정

.terms_Content {
  font-family: "Pretendard JP", ...;
  font-weight: 400;
}

문제: 기존 시스템과 중복

시도 2: 기존 label1_Normal 사용

<Typography variant="label1_Normal">

결과: ✅ 성공적으로 통일됨

학습 포인트:

• 기존 디자인 시스템 활용의 중요성
• 아토믹 디자인 원칙 준수

4. 레이아웃 속성 분리 시도

시도: Typography에서 레이아웃 속성 제거

.terms_Content {
  /* 폰트 속성만 유지 */
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
}

/* 상위 컴포넌트에서 레이아웃 처리 */
.termsDetailContent p {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

결과: ✅ 성공적으로 분리됨

학습 포인트:

• 컴포넌트의 단일 책임 원칙
• Typography는 폰트만, 상위 컴포넌트는 레이아웃만

---

✅ 최종 해결 방법들

1. 스크롤바 범위 통일

// 모든 약관에서 동일한 계산식 사용
const scrollbarPosition = (scrollPosition / maxScroll) * (40 - 0);

2. 스크롤 속도 통일

// 모든 약관에서 동일한 속도 사용
const scrollSpeed = 0.5;

3. Typography 시스템 통일

// 기존 label1_Normal 사용
<Typography variant="label1_Normal">

4. Import 경로 수정

// 올바른 경로로 수정
import { InputField } from "../InputField/InputField";

5. 타입 오류 수정

// 존재하지 않는 타입 제거
export interface SideBarListItem {
  name: string; // IconName → string
}

---

핵심 학습 포인트

1. 아토믹 디자인 원칙의 중요성

• 책임 분리: 각 컴포넌트의 명확한 역할 정의
• 재사용성: InputWithButton 같은 Molecule 컴포넌트로 중복 제거
• 일관성: 기존 디자인 시스템과의 통일성 유지

2. 스크롤바 커스터마이징 기술

• DOM 조작: useRef와 useEffect를 통한 직접 DOM 접근
• 이벤트 처리: wheel, scroll, mousedown, mousemove, mouseup 이벤트
• 성능 최적화: requestAnimationFrame 사용

3. CSS 모듈 관리

• 스타일 분리: 컴포넌트별 CSS 모듈로 스타일 오염 방지
• 동적 스타일: CSS 변수를 통한 JavaScript와 CSS 연동

4. 코드 품질 관리

• 일관성: 모든 컴포넌트에서 동일한 패턴 사용
• 유지보수성: 명확한 import 경로와 타입 정의
• 확장성: 재사용 가능한 컴포넌트 구조

---

🚀 다음 단계 계획

1. Molecules 단계 완성: InputWithButton 외 추가 Molecule 컴포넌트 구현
2. Organisms 단계 진행: 복잡한 UI 조합 컴포넌트 개발
3. 테스트 코드 작성: 각 컴포넌트별 단위 테스트 구현
4. Storybook 문서화: 컴포넌트 사용법 및 예제 정리

---

개선 아이디어

1. 스크롤바 컴포넌트화: 재사용 가능한 Scrollbar Atom 컴포넌트로 분리
2. 타입 안정성 강화: 더 엄격한 TypeScript 타입 정의
3. 성능 최적화: React.memo, useMemo, useCallback 적극 활용
4. 접근성 개선: WAI-ARIA 가이드라인 준수