[OZ코딩스쿨] Part 3-1 IT 직무 이해와 커뮤니케이션/협업_회고

[DAY32]

 

<프로토타입> : 정적인 디자인을 실제 앱처럼 움직이게 만드는 과정

• 사용자가 실제 서비스를 사용하는 것처럼 화면의 흐름과 상호작용을 미리 구현해보는 작업
• 단순히 화면을 디자인하는 것을 넘어 버튼 클릭, 화면 전환, 팝업, 애니메이션 등을 연결해 서비스의 사용 경험을 검증하고 공유할 수 있음
• 목적
  1. 사용자 경험 검증
     1. 버튼 위치가 적절한가?
     2. 화면 흐름이 자연스러운가?
     3. 사용자가 원하는 행동을 쉽게 할 수 있는가?
  2. 사용자 테스트
     1. 어디에서 막히는가?
     2. 어떤 기능이 이해되지 않는가?
     3. 어떤 화면이 불편한가?
  3. 개발 커뮤니케이션
     1. 화면 전환 방식
     2. 팝업 동작
     3. 애니메이션 효과, 예외 상황

 

<피그마 인터랙션>

• On Click : 화면 간의 연결
  • 사용자가 버튼이나 요소를 클릭했을 때 특정 동작이 실행되는 인터랙션
    • 페이지 이동, 상세 화면 열기, 메뉴 열기, 모달 실행
• Scroll
  • 사용자가 화면을 스크롤할 때 콘텐츠가 움직이거나 특정 효과가 적용되는 기능
    • 캐러셀 UI(가로_Horizontal), 긴 콘텐츠 탐색(세로_Vertical)
• Sticky
  • 스크롤 중에도 특정 요소가 화면에 고정되어 계속 보이도록 설정하는 기능
    • 카테고리 탭
• Overlay
  • 현재 화면 위에 새로운 화면을 겹쳐서 표시하는 기능
    • 모달, 팝업, 드롭다운

---

[DAY33]

 

<핸드오프> : 디자이너가 완성한 디자인을 개발자가 실제로 구현할 수 있도록 모든 필요한 정보와 명세를 전달하는 소통 과정

• 기획자(PM, PO) - 무엇을 만들지 > 디자이너(PD) - 어떻게 보일지 > 개발자(BE, FE, iOS, AOS) - 어떻게 작동할지
• 범위 : 디자인 파운데이션, 인터랙션(프로토타입), 기능명세서, 에셋 관리
• 핵심 요소
  • 명확성 Clarity - 용어, 숫자, 상태, 규칙에 대한 명확한 전달
  • 일관성 Consistency - 디자인 시스템의 일관된 적용, 스타일 가이드와 명명 규칙
  • 효율성 Efficiency - 잘 정리된 파일 구조와 명확한 탐색 경로, 링크된 자원
• 개발자가 원하는 정보
  • 레이아웃, 간격 - 정확한 마진, 패딩값, 요소 간 간격, 정렬 방법, 그리드 시스템, 반응형 구성
  • 컴포넌트 - 버튼, 입력창 등의 크기, 색상, 폰트, 그림자, 경계선, 둥근 모서리 스펙, 재사용 패턴 및 변형
  • 상태 명세 - Hover, Active, Disabled, 선택됨/선택안됨, 확장/축소 상태, 오류, 로딩, 성공, 진행중 상태
  • 인터랙션 명세 - 화면 전환, 애니메이션 방식, 제스처, 드래그, 스크롤 동작
• 피그마 작업 시 유의사항
  • 파운데이션 기반 디자인 시스템 구축
  • 프레임 설정 및 네이밍
  • 인터랙션 및 개발 전달사항 정리
• 네이밍 규칙의 중요성
  • 개발자와 디자인 요소와 1:1 매칭 가능
  • 수정 시 빠르게 검색 및 변경 가능
  • 파일 관리 및 버전 관리 용이성 향상
  • 자동화 및 코드 생성 프로세스 지원
  • 의사소통 시간 단축 및 오해 방지
• 네이밍
  • snake_case : 단어를 _(언더바)로 연결, 가독성 좋고 가장 무난하게 사용
  • kebab-case : 단어를 -(대쉬)로 연결하는 방식, CSS 클래스명 등 개발 영역에서 자주 사용
  • camelCase : 첫 단어는 소문자, 이후 단어는 첫 글자를 대문자로 작성
  • prefix 방식 : btn_, ic_, img_ 처럼 앞에 타입을 붙여 레이어의 역할과 종류 빠르게 구분
• 최종 검토 체크리스트
  • 레이어 정리 : 불필요한 요소와 숨겨진 레이어 제거하고 논리적인 그룹과 명확한 네이밍으로 정리
  • 스타일 적용 확인 : 모든 텍스트와 색상이 디자인 시스템의 스타일/토큰 정확히 사용하는지
  • 반응형 대응 : 모바일, 템플릿, 데스크탑 등 다양한 디바이스별 프레임이 올바르게 설정되었는지
  • 상태 케이스 확인 - 에러상태, 로딩 화면, 빈 화면 등 모든 예외 상황에 대한 디자인 누락되지 않았는지
  • QA (Quality Assurance) : 개발 결과물이 디자인과 일치하는지 확인하는 과정, 시각적 요소 뿐 아니라 인터랙션 상태 변화까지 절감
  • 이슈 트래킹 - 발견된 버그, 디자인 불일치 사항을 Notion, Jira 라는 협업툴을 사용해 개선 시급한 부분 (상, 중, 하)로 지정해 빠르게 오류 잡아냄

 

<화면설계서> : 선(Wire)으로 이루어진 화면 구조(Frame)을 표현하는 문서

• 프로젝트명, 작성자, 작성일, 버전, 페이지 번호, 화면코드, 화면명, 화면 설계

 

<기능명세서> : 구현해야 하는 기능에 대해 상세하게 설명하는 문서

 

<Usability Test> : 우리가 만든 화면이 사용자 기준에서 진짜 쉬운지 확인하는 과정

• Brainstorm & Plan > Design > Implement > Verify
• 목표 수립 > 프로토타입 제작 > 리크루팅 > 테스트 진행 > 테스트 종료/개선
  • 사용자가 어디에서 헷갈리는지
  • 목표를 달성하는데 불필요한 단계가 있는지
  • 버튼, 문구, 정보 배치가 직관적인지
  • 사용 중 실수하거나 이탈하는 지점은 어디인지
• 진행과정
  1. 실제 상황 기반으로 작성 - 현실에서 충분히 발생할 수 있는 상황으로 설정
  2. 1개의 시나리오, 1가지 목표 - 목적은 주되, 방법은 알려주지 않기
  3. 성공 기준 정의 - “어디까지 가면 성공인지”
• Maze : 사용성 테스트 지원 플랫폼 - 참가자의 행동 데이터(클릭, 이동 경로, 성공률, 소요 시간 등) 자동으로 수집해 사용성 문제 발견
  • 진행과정
    1. 목표 수립 : 검증하고자 하는 핵심 화면의 목적, 시나리오, task 작성
    2. AS-IS 프로토타입 연결 : 기존 화면 캡쳐 후 클릭이 필요한 영역 투명 프레임으로 설정해 프로토타입 연결
    3. TO-BE 프로토타입 연결 : Start → Goal에 해당하는 핵심 Action만 연결
    4. Maze 링크 연결: Figma → Copy Prototype Link → Maze
    5. 시나리오, task, 후속 질문 작성 : Maze에서 프로토타입, 시나리오, task 설정
       1. opinion scale을 활용해 정량 의견 수집
       2. open question을 활용해 정성 의견 수집
          1. 유도 질문 X
          2. 닫힌 질문만 사용 X
          3. 미래 행동 X 실제 경험 O
          4. 정답이나 경로 X
          5. 정량 + 정성 질문 활용 O
          6. 개선 아이디어 직접 묻기 X