React · · 14분 읽기
Todo 앱에 TDD 적용해보기(1)
간단한 Todo 앱을 만들면서 타입 기반 설계를 적용해보자.
ReactTDD
간단한 Todo 앱을 만들면서 타입 기반 설계를 적용해보자.
앱을 만들기 전에 해야할 것은 바로 요구사항 정의다.
📄 요구사항 정의
요구사항(Requirement)이란,
소프트웨어나 시스템이 사용자의 기대를 만족시키기 위해 갖춰야 할 기능이나 제약조건을 의미한다.
즉,
“이 시스템은 무엇을 해야 하고, 어떤 조건을 따라야 하는가?”
에 대한 명확한 설명이라고 볼 수 있어요.
❓왜 요구사항을 정의해야 하는가?
요구사항을 명확히 정의하는 이유는 다음과 같다.
| 목적 | 설명 |
|---|
| 🔍 문제 정의 | 사용자가 진짜 원하는 바를 정확히 파악할 수 있음 |
| 🛠 설계 및 개발의 기준 | 기능을 구현할 때 기준이 되어 방향을 제시함 |
| 📋 일정 및 예산 산정 | 어떤 기능이 필요한지 알아야 작업량을 추정할 수 있음 |
| ✅ 검수 기준 제공 | 개발 후 요구사항을 기준으로 테스트 및 검토 가능 |
| ⚖️ 오해 방지 | 개발자와 사용자 간의 인식 차이를 줄여줌 |
📂 요구사항의 종류
요구사항은 보통 다음과 같이 나뉜다.
-
기능적 요구사항 (Functional Requirements)
• 시스템이 무엇을 해야 하는지에 대한 요구
• 사용자가 직접 확인할 수 있는 기능 중심
예시:
• 사용자는 할 일을 추가할 수 있어야 한다.
• 로그인 후 사용자 정보가 표시되어야 한다.
-
비기능적 요구사항 (Non-functional Requirements)
• 시스템이 어떻게 동작해야 하는지에 대한 요구
• 성능, 보안, 유지보수성, 접근성, 반응 속도 등
예시:
• 앱은 2초 이내에 응답해야 한다.
• 사용자 데이터는 암호화 저장해야 한다.
-
도메인 요구사항 (Domain Requirements)
• 특정 비즈니스나 산업의 도메인에 특화된 요구
• 규제, 법적 기준, 업계 표준 등을 포함
예시:
• 금융 앱은 거래 내역을 5년 이상 보관해야 한다.
• 의료 시스템은 HIPAA 기준을 따라야 한다.
이런 방식으로 요구사항을 정의해보자.
✅ 기능적 요구사항 (Functional Requirements)
기본 CRUD 기능
| ID | 요구사항 설명 |
|---|
| F-1 | 사용자는 텍스트 입력창에 할 일을 입력하고 추가 버튼을 눌러 목록에 등록할 수 있어야 한다. |
| F-2 | 오늘 날짜가 앱 상단에 표시되어야 한다. |
| F-3 | 사용자는 각 할 일 항목을 체크박스를 눌러 완료 처리할 수 있어야 한다. |
| F-4 | 할 일 항목의 텍스트를 클릭하면 수정 모드로 전환되며, 텍스트를 수정하고 edit 버튼으로 저장할 수 있어야 한다. |
| F-5 | 완료된 항목은 체크 표시와 함께 스타일(예: 회색 또는 취소선 등)로 구분되어야 한다. |
데이터 관리 기능
| ID | 요구사항 설명 |
|---|
| F-6 | 하루가 지나면 기존의 모든 할 일 항목은 자동 삭제되어 목록이 초기화되어야 한다. |
입력 검증 및 제한
| ID | 요구사항 설명 |
|---|
| F-7 | 할 일 항목을 입력하지 않으면 추가 버튼은 비활성화되어야 한다. |
| F-8 | 항목 추가 시 최대 50자 이하만 입력할 수 있다. |
| F-9 | 할 일 항목의 텍스트가 너무 길 경우 UI에서는 …으로 생략 처리되어야 한다. |
| F-16 | 빈 문자열이나 공백만 입력된 경우 추가되지 않아야 한다. |
진행률 및 상태 표시
| ID | 요구사항 설명 |
|---|
| F-10 | 전체 항목 중 완료된 항목의 비율을 Progress Bar로 시각화하여 보여준다. |
| F-15 | 완료된 항목 개수와 전체 항목 개수를 “3/5 완료” 형태로 표시해야 한다. |
사용성 개선 기능
| ID | 요구사항 설명 |
|---|
| F-11 | 드래그 앤 드롭으로 할 일 항목의 순서를 변경할 수 있어야 한다. |
| F-12 | Enter 키를 눌러서도 할 일을 추가할 수 있어야 한다. |
| F-13 | 할 일 추가 후 입력창이 자동으로 비워져야 한다. |
| F-14 | 전체 완료/미완료 토글 기능이 있어야 한다. |
| F-17 | 수정 모드에서 ESC 키로 수정을 취소할 수 있어야 한다. |
⚙️ 비기능적 요구사항 (Non-functional Requirements)
플랫폼 및 접근성
| ID | 요구사항 설명 |
|---|
| NF-1 | UI는 모바일 환경에 최적화되어야 한다. |
| NF-7 | 접근성(Accessibility)을 고려해 키보드 조작, 스크린 리더 호환 등을 지원할 수 있으면 좋다. |
| NF-11 | 키보드만으로도 모든 기능을 사용할 수 있어야 한다. |
| NF-13 | 다양한 화면 크기(스마트폰, 태블릿, 데스크톱)에 반응형으로 대응해야 한다. |
시간 및 데이터 관리
| ID | 요구사항 설명 |
|---|
| NF-2 | 앱은 하루 단위로 동작하며, 날짜가 바뀌면 자동으로 새로 고침된다. |
| NF-9 | 브라우저를 새로고침해도 당일 데이터는 유지되어야 한다. |
| NF-10 | 자정(00:00) 기준으로 정확한 날짜 전환이 이루어져야 한다. |
사용자 경험
| ID | 요구사항 설명 |
|---|
| NF-3 | 사용자 경험(UX)은 단순하고 직관적이어야 하며, 감정적 부담 없이 빠르게 메모하듯이 입력할 수 있어야 한다. |
| NF-5 | 앱은 로그인이나 회원가입 없이도 사용할 수 있어야 한다. |
기술적 요구사항
| ID | 요구사항 설명 |
|---|
| NF-4 | 로컬 스토리지(LocalStorage) 또는 IndexedDB를 이용하여 클라이언트 단에서만 동작하는 앱으로 구성한다. |
| NF-8 | 오프라인 환경에서도 정상 동작해야 한다. |
성능 요구사항
| ID | 요구사항 설명 |
|---|
| NF-6 | 앱은 빠른 로딩 속도를 보장해야 하며, 2초 이내에 초기 화면이 나타나야 한다. |
| NF-12 | 터치 디바이스에서 스와이프 제스처 지원을 고려해야 한다. |
🎨 UX/UI 개선 요구사항
| ID | 요구사항 설명 |
|---|
| UX-1 | 항목 완료/미완료 시 부드러운 애니메이션 효과가 있어야 한다. |
| UX-2 | 할 일이 없을 때 격려 메시지나 빈 상태 일러스트를 표시해야 한다. |
| UX-3 | 하루 전환 시 축하 메시지나 요약 정보를 보여줄 수 있다. |
| UX-4 | 햅틱 피드백(모바일에서 진동)을 지원할 수 있다. |
💾 데이터 관리 요구사항
| ID | 요구사항 설명 |
|---|
| DM-1 | 앱 실행 시 이전 날짜 데이터 자동 정리 로직이 동작해야 한다. |
| DM-2 | 브라우저 저장소 용량 초과 시 대응 방안이 있어야 한다. |
| DM-3 | 데이터 백업/복원 기능(JSON 파일 내보내기/가져오기)을 고려할 수 있다. |
🔒 성능 및 보안 요구사항
| ID | 요구사항 설명 |
|---|
| P-1 | 100개 이상의 항목에서도 부드러운 스크롤과 반응성을 유지해야 한다. |
| P-2 | XSS 공격 방지를 위해 사용자 입력 텍스트를 적절히 이스케이프 처리해야 한다. |
💡 선택적 기능 (Optional Features)
- ✅ 완료된 항목 숨기기/보이기 토글
- 🗑️ 개별 항목 삭제 기능
- 📝 오늘 남긴 할 일을 일기 형식으로 저장하거나 나중에 조회하는 기능
- 🌙 다크 모드 지원
🎯 우선순위 분류
🔴 높음 (필수 구현)
- F-1~F-10, F-12, F-13, F-16
- NF-1~NF-6, NF-9, NF-10
- DM-1, P-2
🟡 중간 (권장 구현)
- F-11, F-14, F-15, F-17
- NF-11, NF-13, UX-1, UX-2
🟢 낮음 (선택적 구현)
- UX-3, UX-4, DM-2, DM-3, P-1
- 선택적 기능들
이 요구사항을 이제 UI/UX와 도메인 지식에 대한 요구사항으로 구분해보자.
📝 Todo 앱 요구사항 분류
🎨 UI/UX 관련 요구사항
화면 표시 및 시각적 요소
| ID | 요구사항 설명 |
|---|
| F-2 | 오늘 날짜가 앱 상단에 표시되어야 한다. |
| F-5 | 완료된 항목은 체크 표시와 함께 스타일(예: 회색 또는 취소선 등)로 구분되어야 한다. |
| F-9 | 할 일 항목의 텍스트가 너무 길 경우 UI에서는 …으로 생략 처리되어야 한다. |
| F-10 | 전체 항목 중 완료된 항목의 비율을 Progress Bar로 시각화하여 보여준다. |
| F-15 | 완료된 항목 개수와 전체 항목 개수를 “3/5 완료” 형태로 표시해야 한다. |
입력 인터페이스
| ID | 요구사항 설명 |
|---|
| F-1 | 사용자는 텍스트 입력창에 할 일을 입력하고 추가 버튼을 눌러 목록에 등록할 수 있어야 한다. |
| F-7 | 할 일 항목을 입력하지 않으면 추가 버튼은 비활성화되어야 한다. |
| F-12 | Enter 키를 눌러서도 할 일을 추가할 수 있어야 한다. |
| F-13 | 할 일 추가 후 입력창이 자동으로 비워져야 한다. |
상호작용 및 조작
| ID | 요구사항 설명 |
|---|
| F-3 | 사용자는 각 할 일 항목을 체크박스를 눌러 완료 처리할 수 있어야 한다. |
| F-4 | 할 일 항목의 텍스트를 클릭하면 수정 모드로 전환되며, 텍스트를 수정하고 edit 버튼으로 저장할 수 있어야 한다. |
| F-11 | 드래그 앤 드롭으로 할 일 항목의 순서를 변경할 수 있어야 한다. |
| F-14 | 전체 완료/미완료 토글 기능이 있어야 한다. |
| F-17 | 수정 모드에서 ESC 키로 수정을 취소할 수 있어야 한다. |
플랫폼 및 반응형 -> 제외
| ID | 요구사항 설명 |
|---|
| NF-1 | UI는 모바일 환경에 최적화되어야 한다. |
| NF-13 | 다양한 화면 크기(스마트폰, 태블릿, 데스크톱)에 반응형으로 대응해야 한다. |
| NF-12 | 터치 디바이스에서 스와이프 제스처 지원을 고려해야 한다. |
접근성 및 키보드 조작 -> 제외
| ID | 요구사항 설명 |
|---|
| NF-7 | 접근성(Accessibility)을 고려해 키보드 조작, 스크린 리더 호환 등을 지원할 수 있으면 좋다. |
| NF-11 | 키보드만으로도 모든 기능을 사용할 수 있어야 한다. |
사용자 경험 및 애니메이션
| ID | 요구사항 설명 |
|---|
| NF-3 | 사용자 경험(UX)은 단순하고 직관적이어야 하며, 감정적 부담 없이 빠르게 메모하듯이 입력할 수 있어야 한다. |
| UX-1 | 항목 완료/미완료 시 부드러운 애니메이션 효과가 있어야 한다. |
| UX-2 | 할 일이 없을 때 격려 메시지나 빈 상태 일러스트를 표시해야 한다. |
| UX-3 | 하루 전환 시 축하 메시지나 요약 정보를 보여줄 수 있다. |
| UX-4 | 햅틱 피드백(모바일에서 진동)을 지원할 수 있다. |
성능 및 기술적 제약
| ID | 요구사항 설명 |
|---|
| NF-6 | 앱은 빠른 로딩 속도를 보장해야 하며, 2초 이내에 초기 화면이 나타나야 한다. |
| NF-8 | 오프라인 환경에서도 정상 동작해야 한다. |
| P-1 | 100개 이상의 항목에서도 부드러운 스크롤과 반응성을 유지해야 한다. |
🏗️ 도메인/비즈니스 로직 관련 요구사항
데이터 검증 및 제약사항
| ID | 요구사항 설명 |
|---|
| F-8 | 항목 추가 시 최대 50자 이하만 입력할 수 있다. |
| F-16 | 빈 문자열이나 공백만 입력된 경우 추가되지 않아야 한다. |
시간 기반 비즈니스 로직
| ID | 요구사항 설명 |
|---|
| F-6 | 하루가 지나면 기존의 모든 할 일 항목은 자동 삭제되어 목록이 초기화되어야 한다. |
| NF-2 | 앱은 하루 단위로 동작하며, 날짜가 바뀌면 자동으로 새로 고침된다. |
| NF-10 | 자정(00:00) 기준으로 정확한 날짜 전환이 이루어져야 한다. |
데이터 저장 및 관리
| ID | 요구사항 설명 |
|---|
| NF-4 | 로컬 스토리지(LocalStorage) 또는 IndexedDB를 이용하여 클라이언트 단에서만 동작하는 앱으로 구성한다. -> 기술적 내용이 있어서 제외. 바로 아래 요구사항으로 설명이 가능. |
| NF-9 | 브라우저를 새로고침해도 당일 데이터는 유지되어야 한다. |
| DM-1 | 앱 실행 시 이전 날짜 데이터 자동 정리 로직이 동작해야 한다. -> 기능 확장 고려하면 이전 데이터를 남겨두는 것도 좋음. |
| DM-2 | 브라우저 저장소 용량 초과 시 대응 방안이 있어야 한다. |
| DM-3 | 데이터 백업/복원 기능(JSON 파일 내보내기/가져오기)을 고려할 수 있다. |
보안 및 데이터 보호
| ID | 요구사항 설명 |
|---|
| P-2 | XSS 공격 방지를 위해 사용자 입력 텍스트를 적절히 이스케이프 처리해야 한다. |
| NF-5 | 앱은 로그인이나 회원가입 없이도 사용할 수 있어야 한다. |
위 요구사항을 기반으로 간단하게 디자인을 만들어보자.
다음 포스팅부터는 위 내용을 기반으로 vite, typescript, react를 통해 간단한 앱을 만들어 볼 것이다.