[HCI]인터랙션 설계

1. 인터랙션 디자인의 기본 구조 (IPO 모델)

"사용자와 시스템의 대화 메커니즘"

첫 번째 사진(기본 흐름도)은 인터랙션이 발생하는 가장 기초적인 3단계를 보여줍니다.

① 사용자의 입력값 (Input)

• 정의: 사용자가 시스템에 자신의 의도를 전달하는 행위.
• 세부 요소: 버튼 클릭, 텍스트 입력, 검색, 음성 명령, 제스처 등.
• 📢 PULSE 적용 (기획/FE):
  • 단순히 '클릭'만 있는 게 아닙니다. "사진 3장 업로드"라는 행위 자체가 가장 큰 입력값입니다.
  • 기획 포인트: 타겟 A(60대)를 위해 드래그 앤 드롭보다는 "터치해서 앨범 열기" 같은 가장 익숙한 입력 방식을 채택해야 합니다.

② 과정 (Process)

• 정의: 입력값을 받아 시스템 내부에서 처리하는 단계. (사용자 눈에는 보이지 않음)
• 세부 요소: 연산, 데이터베이스 조회, 알고리즘 수행.
• 📢 PULSE 적용 (BE - Spring/FastAPI):
  • 작성자님의 주 무대입니다.
  • 입력된 사진을 S3에 저장하고 $\rightarrow$ FastAPI에 분석 요청을 보내고 $\rightarrow$ 결과를 다시 받아오는 '비즈니스 로직' 전체가 여기에 해당합니다.
  • 중요: 이 '과정'이 길어질 경우(영상 렌더링 등), 프론트엔드에 "잠시만 기다려주세요"라는 신호를 줘서 사용자가 멈춘 줄 알지 않게 해야 합니다.

③ 결과값 도출 (Output)

• 정의: 처리가 완료되었음을 사용자에게 알리는 피드백.
• 세부 요소: 화면 전환, 검색 결과 리스트, 알림 팝업, 소리, 진동.
• 📢 PULSE 적용 (FE/UX):
  • "생성 완료" 팝업뿐만 아니라, 완성된 릴스 영상이 자동 재생되는 것이 가장 강력한 결과값입니다.

---

2. 인터랙션 설계의 지침 (Guidelines)

"사용자가 '편하다'고 느끼게 만드는 규칙들"

두 번째, 세 번째 사진의 왼쪽 가지(설계의 지침)입니다. 이 규칙들이 지켜져야 "좋은 UX"라고 부릅니다.

A. 플로우 (Flow)

사용자가 물 흐르듯 자연스럽게 목표까지 도달하게 하는 것입니다.

1. 사용자 능력 고려 (User Capability):
   • 의미: 사용자의 신체적, 인지적 능력을 감안해야 함.
   • PULSE 적용: 사장님들은 노안이 있거나 손이 둔할 수 있습니다(물리적 맥락). 따라서 버튼(Touch Target)을 44px 이상으로 큼직하게 설계하고, 복잡한 제스처는 배제합니다.
2. 명확한 과업의 목적 (Clear Purpose):
   • 의미: 지금 내가 뭘 하고 있는지 헷갈리면 안 됨.
   • PULSE 적용: 화면 상단에 "릴스 만들기 2단계: 사진 선택"처럼 현재 단계를 명확히 표시(Breadcrumb 또는 Stepper)해 줍니다.
3. 신속한 피드백 (Rapid Feedback):
   • 의미: 내 행동에 대해 시스템이 즉각 반응해야 함.
   • PULSE 적용: '생성하기' 버튼을 누르자마자 0.1초 내에 로딩 스피너가 돌아야 합니다. 백엔드 처리가 늦더라도, UI 반응은 즉시 와야 합니다(Latency Compensation).

B. 투명성 (Transparency)

시스템의 상태를 사용자에게 솔직하고 이해하기 쉽게 보여주는 것입니다.

1. 부정적 요소 최소화 (Minimize Negative):
   • 의미: 에러, 대기 시간, 복잡함 등 스트레스 요인을 줄임.
   • PULSE 적용: 영상 생성에 10초가 걸린다면, 흰 화면만 보여주는 게 아니라 "AI가 맛있는 영상을 굽는 중입니다 (30%)..." 같은 문구로 지루함을 덜어줍니다.
2. 긍정적 요소 극대화 (Maximize Positive):
   • 의미: 성취감, 재미, 편리함을 높임.
   • PULSE 적용: 영상 생성이 완료되었을 때 단순히 파일만 주는 게 아니라, 폭죽 효과(Confetti) 등을 터뜨려 "사장님이 해내셨어요!"라는 성취감을 부여합니다.
3. 상충된 요소 간의 조화 (Balance):
   • 의미: 단순함 vs 기능성 처럼 서로 충돌하는 가치를 조율함.
   • PULSE 적용 (핵심):
     • 자동화(단순함)를 원하지만 수정(제어권)도 원함.
     • 해결: 기본은 '완전 자동 생성'으로 가되, '재생성(Regenerate)' 버튼을 두어 복잡한 편집 도구 없이도 결과를 바꿀 수 있게 타협점을 찾습니다.

---

3. 인터랙션 결과의 정리 (Documentation)

"설계한 내용을 개발 문서로 남기는 법"

두 번째, 세 번째 사진의 오른쪽 가지(결과의 정리)입니다. 백엔드 개발자인 작성자님에게 직접적으로 필요한 설계 산출물입니다.

A. 유스케이스 다이어그램 (Use Case Diagram)

시스템의 기능 범위를 정의합니다. "누가 무엇을 하는가?"

1. 액터 (Actor): 시스템을 사용하는 주체.
   • PULSE: 소상공인(User), 관리자(Admin).
2. 유스케이스 (Use Case): 시스템이 제공하는 기능 단위.
   • PULSE: 로그인, 리뷰 분석, 릴스 생성, 대시보드 확인.
3. 관계 (Relationship): 액터와 유스케이스 간의 연결.
   • PULSE: 소상공인은 릴스 생성을 실행한다. 릴스 생성은 사진 업로드를 포함(Include)한다.

B. 시퀀스 모형 (Sequence Model)

시간의 흐름에 따른 객체 간의 상호작용입니다. "언제 어떻게 주고받는가?"

1. 개별 시퀀스 모형 (Individual Sequence): 하나의 유스케이스 내부 흐름.
   • PULSE (릴스 생성 API 흐름):
     1. User $\rightarrow$ Front: '생성' 클릭
     2. Front $\rightarrow$ Spring: POST /video/create 요청
     3. Spring $\rightarrow$ FastAPI: 분석 및 렌더링 요청 (Async)
     4. FastAPI $\rightarrow$ Spring: 생성 완료 신호 및 S3 URL 반환
     5. Spring $\rightarrow$ DB: 영상 정보 저장
     6. Spring $\rightarrow$ Front: 완료 응답 (200 OK)
2. 결합 시퀀스 모형 (Combined Sequence): 여러 시퀀스가 연결된 전체 흐름.
   • PULSE: 로그인 $\rightarrow$ 가게 등록 $\rightarrow$ 인사이트 분석 $\rightarrow$ 릴스 생성으로 이어지는 유저의 전체 여정을 도식화한 것.

---

📝 종합 요약 및 리팩토링 결론

이 다이어그램들은 "사용자를 배려하는 UI를 설계(지침)하고, 이를 개발자가 이해할 수 있는 문서(정리)로 만들어라"는 메시지를 담고 있습니다.

PULSE 프로젝트에 적용할 Action Item:

1. 플로우(Flow): 사장님이 헤매지 않게 네비게이션을 단순화하고, 모든 버튼을 키우세요. (FE)
2. 투명성(Transparency): 백엔드 처리 시간(영상 생성 등) 동안 프론트엔드에서 보여줄 '로딩 문구'나 '진행률 표시' API를 설계하세요. (BE/FE)
3. 시퀀스(Sequence): Spring Boot와 FastAPI가 통신하는 과정을 시퀀스 다이어그램으로 그려서, 팀원들과 API 명세를 확정하세요. (BE)