새 챕터 ! 3번째 챕터로 왔다 >_<
오늘도 잠깐 멜로빈스 영상을 봤다
“내가 못할 거라는 마음이 가장 큰 적이다.”
게스트가 10살 때 “나는 퍼스트 클래스 탈 사람이다!” 라고 생각하고, 정말로 돈을 벌어서
티켓을 사낸 스토리를 풀면서 이야기 해주었다
난 이코노미에 어울리지 않아, 퍼스트 클래스에 타고 말거야. 하고
정말 그것을 해내는...‼️
진정한 퀸의 마인드가 아닐까 ㅎㅎㅎ
IT직무 이해와 커뮤니케이션
챕터 3의 학습 목표
- 개발자와의 협업 구조 이해
- 데이터 기반 문제 해결 및 분석 실습
- 웹의 기본 구조 (HTML / CSS) 기초 개념
- 프로토타입 제작 및 핸드오프 과정 익히기
개발자와의 소통, 왜 중요할까?
UX 디자이너의 역할은 사용자의 문제를 해결하는 디자인을 만드는 것
하지만 그 디자인이 실제 서비스로 구현되려면 개발자와의 원활한 커뮤니케이션이 필수다.
협업의 핵심: “같은 언어로 말하기”
➡️ 그래서 HTML, CSS 공부가 필요한 것 ‼️
프로토타이핑의 핵심 툴
실무에서 가장 많이 쓰이는 툴은 다음과 같다.
| 툴 | 주요 기능 | 특징 |
|---|---|---|
| Figma | 디자인 & 프로토타입 | 실시간 협업 / 웹 기반 / 자동 저장 |
| Adobe XD | 프로토타입 / 애니메이션 | 직관적 UI, Adobe 제품군과 연동 |
| ProtoPie | 인터랙션 프로토타입 | 실제 앱처럼 정교한 인터랙션 구현 가능 |
간단하게 새로운 챕터를프리뷰하고,
오늘 수업은 피그마 프로토타입 기능 실습을 하였다!
피그마 프로토타입 실습
정말 많이 쓰는 단축키 모음
Shift + E → 디자인 / 프로토타입 모드 전환
Shift + Space → 플로우(Flow) 미리보기
- 프레임(Frame) 간 연결로 화면 전환 구성
- 트리거 설정 (Click / Hover / After delay 등)
- 전환 애니메이션 추가 (Instant, Smart animate 등)
등을 통해 실제 앱 동작처럼 테스트할 수 있다 👍
실습을 와이어프레임식으로 클론하여 프로토타입을 기능까지 적용하는 것이 과제였으므로
바로 과제 섹션으로 넘어가겠다 >_<
과제
하나씩 클론하면서, 계속 사용될 오브젝트는 컴포넌트화 해서 작업하였다.
좋아요(하트)는 기본/호버 시/저장으로 관리하고, 그 사이 간 트리거 및 애니메이션을 설정해주었다.
전체 플로우 완성 - Task는 비회원 구매로 설정했다.
보통 클릭>전환으로 설정하면 되어서 쉬었으나,
특별히 달라서 설명해주셨던 부분들은 다시 기록해보려고 한다.
Open Overlay
add to cart 버튼 클릭 시 오버레이되며 창이 뜨게 하는 기능이다.
모달창도 이 기능으로 구현할 것이라고 예상됨!
이렇게 바로 백그라운드 및 위치도 선정할 수 있다 👍
피그마 최고가되,,
After Delay
로딩 화면 전환은 유저의 클릭 등의 트리거가 필요없다.
일정시간 지연 후 바로 넘어가고자 하는 화면으로 전환되어야 한다.
그걸 구현하기 위한 트리거가 After Delay 이다.
전체 프로토타입 링크도 공유하겠다 ㅎㅎ
회고
피그마의 기능, 프로토타입을 배우고 사용해볼 수 있어서 넘 흥미롭고 재미있었다 ㅎㅎ
하나씩 만져보니까 와 이렇게 바로 되는구나,, 하면서 첫 피그마 배우면서 느꼈던 걸
다시 느껴볼 수 있었다. 또 앞으로 html/css 를 다시 배우게 되는데, 다 까먹었는데 잘 할 수 있겠지.. 라는 걱정도 들었다. 내 두가지 전공을 모두 살리고 취미이자 강점도 살릴 수 있는게 요 프로덕트 디자이너라고 생각했는데, 드디어 컴공에서 배운걸 직접적으로 써먹을 때가 왔다!!!!/.. 화이팅~~
#협업이 아주 중요한 프로덕트디자이너
