-
Notifications
You must be signed in to change notification settings - Fork 2
사용자 시나리오 by 임재도
Hyein Jeong edited this page Nov 5, 2024
·
1 revision
주제 :: 중장년층 사용자가 쉽게 길 안내를 받게 해주는 모바일 웹 서비스
-
액터:
- 사용자: 로그인한 일반 사용자로, 모든 기능을 이용할 수 있습니다.
- 비회원 사용자: 로그인하지 않은 사용자로, 제한된 기능만 이용할 수 있습니다.
-
유즈케이스:
- 회원 가입: 새로운 사용자가 계정을 생성하는 기능입니다.
- 로그인: 기존 사용자가 아이디와 비밀번호로 로그인하는 기능입니다.
- 로그아웃: 로그인한 사용자가 세션을 종료하는 기능입니다.
- 지도 보기: 지도를 확인하고 탐색하는 기능입니다.
- 그림 그리기 (펜 사용): 펜 도구를 사용하여 지도 위에 그림을 그리는 기능입니다.
- 그림 수정 (지우개 사용): 지우개 도구를 사용하여 기존 그림을 수정하는 기능입니다.
- 지도 확대/축소 및 이동: 지도의 스케일 변경에 따라 그림도 함께 확대/축소되는 기능입니다.
- 다른 사용자의 그림 보기: 다른 사용자가 그린 그림을 조회하는 기능입니다.
- 그림 삭제: 자신이 그린 그림을 삭제하는 기능입니다.
- 사용자 설정 변경 (펜/지우개 설정): 펜과 지우개의 설정을 변경하는 기능입니다.
- 그림 공유하기: 자신의 그림을 다른 사람과 공유하는 기능입니다.
- 회원 가입 유도: 비회원 사용자가 제한된 기능에 접근하려고 할 때 회원 가입을 유도하는 기능입니다.
-
관계:
- 연결 관계: 액터와 유즈케이스 간의 상호작용을 나타냅니다.
-
포함 관계 (
<<include>>
): 한 유즈케이스가 다른 유즈케이스의 기능을 포함할 때 사용합니다.- 그림 그리기와 그림 수정은 지도 확대/축소 및 이동을 포함합니다.
-
확장 관계 (
<<extend>>
): 유즈케이스의 기능이 특정 조건에서 확장될 때 사용합니다.- 회원 가입 유도는 비회원 사용자가 그림 그리기 기능에 접근하려고 할 때 확장됩니다.
- 문제점: 지도 이동 및 확대/축소 시 캔버스 레이어의 동기화가 성능에 영향을 줄 수 있습니다.
- 도전 과제: 효율적인 이벤트 처리와 렌더링 최적화를 통해 부드러운 사용자 경험을 제공하는 것.
-
딥다이브 포인트:
requestAnimationFrame
, Offscreen Canvas, WebGL 등을 활용하여 성능 최적화.
- 문제점: 그림 데이터의 용량이 커지면 네트워크 전송과 로딩 시간이 길어질 수 있습니다.
- 도전 과제: 데이터 압축 및 효율적인 저장 구조 설계.
- 딥다이브 포인트: SVG 활용, 데이터 직렬화 기법(예: Protobuf), 이미지 압축 알고리즘.
- 문제점: 기능이 복잡해질수록 버그가 발생할 확률이 높아집니다.
- 도전 과제: 단위 테스트, 통합 테스트를 작성하고 CI/CD 파이프라인을 구축하여 지속적인 통합과 배포를 자동화.
- 딥다이브 포인트: Jest, React Testing Library, Cypress 등을 사용하여 테스트 작성, GitHub Actions 또는 Jenkins를 활용한 CI/CD 구축.
- 문제점: 다양한 모바일 기기와 브라우저 환경에서의 호환성 확보.
- 도전 과제: 반응형 디자인 구현과 다양한 브라우저에서의 기능 테스트 및 수정.
- 딥다이브 포인트: CSS 미디어 쿼리, 뷰포트 단위, 브라우저 호환성 이슈 및 폴리필 적용.
- 문제점: 네트워크 연결이 불안정한 환경에서도 앱을 사용할 수 있도록 지원.
- 도전 과제: **Progressive Web App(PWA)**로의 확장, 서비스 워커를 활용한 오프라인 캐싱.
- 딥다이브 포인트: Service Worker, Cache API, IndexedDB 등을 사용하여 오프라인 지원 기능 구현.
- 문제점: 사용자 데이터의 안전한 전송 및 저장.
- 도전 과제: 데이터 전송 시 암호화 적용, 보안 취약점 분석 및 대응.
- 딥다이브 포인트: HTTPS 적용, OWASP Top 10 취약점 학습 및 대응 방법 적용.
- 문제점: 여러 사용자가 동시에 같은 지도 위에서 그림을 그릴 때 발생하는 동기화 문제.
- 도전 과제: WebSocket 등을 활용하여 실시간 데이터 통신 구현.
- 딥다이브 포인트: Socket.io 또는 WebRTC를 사용하여 실시간 통신 구현, 충돌 관리 기법(예: CRDT).
- 문제점: 사용자 환경에서 발생하는 성능 이슈 파악이 어렵습니다.
- 도전 과제: 성능 모니터링 도구를 적용하여 성능 데이터 수집 및 분석.
- 딥다이브 포인트: Google Lighthouse, Web Vitals, Sentry 등을 활용한 모니터링 및 분석.
- 문제점: 장애를 가진 사용자들이 앱을 이용하기 어려울 수 있습니다.
- 도전 과제: 웹 접근성 지침에 따른 UI/UX 개선.
- 딥다이브 포인트: WAI-ARIA 표준 학습 및 적용, 스크린 리더 테스트 등.
- 문제점: 백엔드 경험이 적은 팀원의 기술 역량 강화 필요.
- 도전 과제: RESTful API 설계 원칙 준수, 데이터베이스 최적화, 인증 및 권한 관리 개선.
- 딥다이브 포인트: Express.js 미들웨어 심화, 데이터베이스 인덱싱 및 ORM 사용법, JWT를 활용한 인증 구현.
- 문제점: 개발한 애플리케이션을 안정적으로 배포하고 운영하는 경험 부족.
- 도전 과제: Docker를 사용한 컨테이너화, 클라우드 서비스(AWS, GCP 등)를 이용한 배포.
- 딥다이브 포인트: Dockerfile 작성, Kubernetes 기초 학습, Infrastructure as Code(IaC) 도구 사용.
- 문제점: 사용자 경험이 단조로울 수 있음.
- 도전 과제: 부드러운 애니메이션과 인터랙션을 통해 사용자 경험 향상.
- 딥다이브 포인트: CSS 애니메이션, Framer Motion, Canvas API의 고급 활용.
- 문제점: 복잡한 계산이나 렌더링으로 메인 스레드가 막힐 수 있음.
- 도전 과제: Web Worker를 사용하여 메인 스레드의 부하를 줄이는 것.
- 딥다이브 포인트: Web Worker API 학습 및 적용, 데이터 전달 및 스레드 간 통신 방법 이해.
- 문제점: 빠른 개발로 인해 코드 품질이 저하될 수 있음.
- 도전 과제: 코드 리뷰를 통한 품질 개선, 디자인 패턴 적용.
- 딥다이브 포인트: SOLID 원칙, 리팩토링 기법, 린트 및 포매터 도구 설정(예: ESLint, Prettier).
- 문제점: 다국어 지원이 필요한 경우 초기 설계가 중요.
- 도전 과제: 국제화 라이브러리를 사용하여 다국어 지원 구조 설계.
- 딥다이브 포인트: i18next 등 라이브러리 활용, 다국어 데이터 관리 방법.