Skip to content

사용자 시나리오 by 임재도

Hyein Jeong edited this page Nov 5, 2024 · 1 revision

📝 프로젝트 요약

주제 :: 중장년층 사용자가 쉽게 길 안내를 받게 해주는 모바일 웹 서비스

📝 서비스 예상 이미지

image

📝 유즈케이스

image

설명:

  • 액터:
    • 사용자: 로그인한 일반 사용자로, 모든 기능을 이용할 수 있습니다.
    • 비회원 사용자: 로그인하지 않은 사용자로, 제한된 기능만 이용할 수 있습니다.
  • 유즈케이스:
    • 회원 가입: 새로운 사용자가 계정을 생성하는 기능입니다.
    • 로그인: 기존 사용자가 아이디와 비밀번호로 로그인하는 기능입니다.
    • 로그아웃: 로그인한 사용자가 세션을 종료하는 기능입니다.
    • 지도 보기: 지도를 확인하고 탐색하는 기능입니다.
    • 그림 그리기 (펜 사용): 펜 도구를 사용하여 지도 위에 그림을 그리는 기능입니다.
    • 그림 수정 (지우개 사용): 지우개 도구를 사용하여 기존 그림을 수정하는 기능입니다.
    • 지도 확대/축소 및 이동: 지도의 스케일 변경에 따라 그림도 함께 확대/축소되는 기능입니다.
    • 다른 사용자의 그림 보기: 다른 사용자가 그린 그림을 조회하는 기능입니다.
    • 그림 삭제: 자신이 그린 그림을 삭제하는 기능입니다.
    • 사용자 설정 변경 (펜/지우개 설정): 펜과 지우개의 설정을 변경하는 기능입니다.
    • 그림 공유하기: 자신의 그림을 다른 사람과 공유하는 기능입니다.
    • 회원 가입 유도: 비회원 사용자가 제한된 기능에 접근하려고 할 때 회원 가입을 유도하는 기능입니다.
  • 관계:
    • 연결 관계: 액터와 유즈케이스 간의 상호작용을 나타냅니다.
    • 포함 관계 (<<include>>): 한 유즈케이스가 다른 유즈케이스의 기능을 포함할 때 사용합니다.
      • 그림 그리기그림 수정지도 확대/축소 및 이동을 포함합니다.
    • 확장 관계 (<<extend>>): 유즈케이스의 기능이 특정 조건에서 확장될 때 사용합니다.
      • 회원 가입 유도는 비회원 사용자가 그림 그리기 기능에 접근하려고 할 때 확장됩니다.

📝 기술적인 도전

지도와 캔버스 동기화 최적화:

  • 문제점: 지도 이동 및 확대/축소 시 캔버스 레이어의 동기화가 성능에 영향을 줄 수 있습니다.
  • 도전 과제: 효율적인 이벤트 처리와 렌더링 최적화를 통해 부드러운 사용자 경험을 제공하는 것.
  • 딥다이브 포인트: requestAnimationFrame, Offscreen Canvas, WebGL 등을 활용하여 성능 최적화.

그림 데이터의 효율적인 저장 및 로딩:

  • 문제점: 그림 데이터의 용량이 커지면 네트워크 전송과 로딩 시간이 길어질 수 있습니다.
  • 도전 과제: 데이터 압축 및 효율적인 저장 구조 설계.
  • 딥다이브 포인트: SVG 활용, 데이터 직렬화 기법(예: Protobuf), 이미지 압축 알고리즘.

테스트 자동화 및 CI/CD 구축:

  • 문제점: 기능이 복잡해질수록 버그가 발생할 확률이 높아집니다.
  • 도전 과제: 단위 테스트, 통합 테스트를 작성하고 CI/CD 파이프라인을 구축하여 지속적인 통합과 배포를 자동화.
  • 딥다이브 포인트: Jest, React Testing Library, Cypress 등을 사용하여 테스트 작성, GitHub Actions 또는 Jenkins를 활용한 CI/CD 구축.

반응형 디자인 및 크로스 브라우징 대응:

  • 문제점: 다양한 모바일 기기와 브라우저 환경에서의 호환성 확보.
  • 도전 과제: 반응형 디자인 구현과 다양한 브라우저에서의 기능 테스트 및 수정.
  • 딥다이브 포인트: CSS 미디어 쿼리, 뷰포트 단위, 브라우저 호환성 이슈 및 폴리필 적용.

오프라인 기능 구현(PWA):

  • 문제점: 네트워크 연결이 불안정한 환경에서도 앱을 사용할 수 있도록 지원.
  • 도전 과제: **Progressive Web App(PWA)**로의 확장, 서비스 워커를 활용한 오프라인 캐싱.
  • 딥다이브 포인트: Service Worker, Cache API, IndexedDB 등을 사용하여 오프라인 지원 기능 구현.

보안 강화 및 사용자 데이터 보호:

  • 문제점: 사용자 데이터의 안전한 전송 및 저장.
  • 도전 과제: 데이터 전송 시 암호화 적용, 보안 취약점 분석 및 대응.
  • 딥다이브 포인트: HTTPS 적용, OWASP Top 10 취약점 학습 및 대응 방법 적용.

실시간 협업 기능 추가:

  • 문제점: 여러 사용자가 동시에 같은 지도 위에서 그림을 그릴 때 발생하는 동기화 문제.
  • 도전 과제: WebSocket 등을 활용하여 실시간 데이터 통신 구현.
  • 딥다이브 포인트: Socket.io 또는 WebRTC를 사용하여 실시간 통신 구현, 충돌 관리 기법(예: CRDT).

애플리케이션 성능 모니터링 및 분석:

  • 문제점: 사용자 환경에서 발생하는 성능 이슈 파악이 어렵습니다.
  • 도전 과제: 성능 모니터링 도구를 적용하여 성능 데이터 수집 및 분석.
  • 딥다이브 포인트: Google Lighthouse, Web Vitals, Sentry 등을 활용한 모니터링 및 분석.

접근성 개선(A11y):

  • 문제점: 장애를 가진 사용자들이 앱을 이용하기 어려울 수 있습니다.
  • 도전 과제: 웹 접근성 지침에 따른 UI/UX 개선.
  • 딥다이브 포인트: WAI-ARIA 표준 학습 및 적용, 스크린 리더 테스트 등.

백엔드 기술 심화 학습:

  • 문제점: 백엔드 경험이 적은 팀원의 기술 역량 강화 필요.
  • 도전 과제: RESTful API 설계 원칙 준수, 데이터베이스 최적화, 인증 및 권한 관리 개선.
  • 딥다이브 포인트: Express.js 미들웨어 심화, 데이터베이스 인덱싱ORM 사용법, JWT를 활용한 인증 구현.

DevOps 및 인프라 구축 경험:

  • 문제점: 개발한 애플리케이션을 안정적으로 배포하고 운영하는 경험 부족.
  • 도전 과제: Docker를 사용한 컨테이너화, 클라우드 서비스(AWS, GCP 등)를 이용한 배포.
  • 딥다이브 포인트: Dockerfile 작성, Kubernetes 기초 학습, Infrastructure as Code(IaC) 도구 사용.

애니메이션 및 사용자 인터랙션 개선:

  • 문제점: 사용자 경험이 단조로울 수 있음.
  • 도전 과제: 부드러운 애니메이션과 인터랙션을 통해 사용자 경험 향상.
  • 딥다이브 포인트: CSS 애니메이션, Framer Motion, Canvas API의 고급 활용.

멀티스레딩 및 Web Worker 활용:

  • 문제점: 복잡한 계산이나 렌더링으로 메인 스레드가 막힐 수 있음.
  • 도전 과제: Web Worker를 사용하여 메인 스레드의 부하를 줄이는 것.
  • 딥다이브 포인트: Web Worker API 학습 및 적용, 데이터 전달 및 스레드 간 통신 방법 이해.

코드 품질 향상 및 리팩토링:

  • 문제점: 빠른 개발로 인해 코드 품질이 저하될 수 있음.
  • 도전 과제: 코드 리뷰를 통한 품질 개선, 디자인 패턴 적용.
  • 딥다이브 포인트: SOLID 원칙, 리팩토링 기법, 린트 및 포매터 도구 설정(예: ESLint, Prettier).

국제화(i18n) 및 지역화(L10n) 지원:

  • 문제점: 다국어 지원이 필요한 경우 초기 설계가 중요.
  • 도전 과제: 국제화 라이브러리를 사용하여 다국어 지원 구조 설계.
  • 딥다이브 포인트: i18next 등 라이브러리 활용, 다국어 데이터 관리 방법.

참고

Clone this wiki locally