[10/25 부트캠프] ⑤팀 소개 사이트 만들기, WIL, KPT

 

프로덕트 디자이너 부트캠프 D-5 (1주차)

📌To Do List

*5주차 강의 완강

*프로젝트 발표

*멘토 피드백 후 프로젝트 재수정

---

 

01 5주차 강의

프로토타입과 프로토타이핑

회사에서도 시연할 때 썼던 방법이라 익히 알고있긴 했다.

근데 WHY라는 궁금증이 생겼다. 사람들에게 실제앱처럼 보여주기 위해 실제 앱처럼 구상하기 위한 것은 알고 있었지만

개발하는거랑 속도가 비슷하지 않나? 왜 굳이 하는걸까? 하는 생각들...

프로토타입을 하면 더 빠르게 할 수 있을까? 에 대한 궁금증에 대해 풀리지가 않았는데

명확하게 장단점을 말씀해주시면서 유동적으로 써야할 때와 안쓸 때를 구분할 수 있었다.

 

💡프로토타입(Prototype)이란?
- 시제품. 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것. =테스트제품

 

✅ Lo-fi: 낮은 단계의 프로토타입. 전체 흐름을 빠르게 맞춰볼 수 있다.

✅ Hi-fi: 실제 제품과 거의 같거나 유사한 수준

 

 

 

❓프로토 타입은 왜 만드는걸까

1) 실제 제품을 만들지 않고 아이디어를 검증할 수 있다

: 사용자 분석, 디자인, 개발까지해서 실제 제품을 내놓는 건 어렵다. 다 만들었는데 기획에서 잘못 접근했다면 제품을 처음부터 다시 만들어야 하는 위험. 이런 불상사 막고 아이디어와 컨셉을 실제 제품처럼 태스트하고 결정하는 데 도움을 준다. 또 실제 제품과 흡사하게 만든 프로토타입은 사용자 대상 피드백을 수집하는 도구로 사용 가능.

우리 회사는 개발이 함께 진행하는 과정에서 프로토타입을 만들어서 그런가보다.. 포스코에서 쓰일 프로토타입을 만드는데 개발을 한 것을 보여주는 게 안되나 하는 느낌...ㅋㅋ...ㅠ

 

2) 팀 구성원들과 시각적인 결과물로 소통할 수 있다

: 글, 말로만 설명하면 서로 생각한 방법, 움직임이 다를 수 있다. 실제 움직이는 프로토타입을 중심으로 생각한 것을 논의하면 효과적이다.

이 부분은 실제로 협업만 해봐도 안다.. 프로젝트 만들때도 말로만 설명하면 이해도가 떨어짐

 

3) 부족하거나 놓친 부분을 확인할 수 있다

: 사용자 시나리오 테스트를 해보며 더 나은 방향으로 수정 가능

 

 

* 프로토타입은 다양한 툴이 존재: 프로토파이, 프레이머 등. 피그마는 여러 툴 중 하나다.

아직까진 피그마를 통해 프로토타입을 만드는 것은 추천하지 않는다.

 

 

📌장점

1) 직관적이다

2) 빠르게 만들 수 있다.

 

📌단점

 

1) 실제 제품처럼 동작하는 걸 만들기 어렵다

2) 효율성을 떨어뜨린다

: 기능이 제한적이라 정교한 프로토타입을 ㅁ나드는 시간이 오래 걸린다. 복잡할수록 빠르게 수정하고 만드는게 어려워서 개발을 통해 실제품을 만드는게 빠르는 경우도 있다

 

① 핫스팟(Hot Spot) ② 커넥션(Connection) ③ 종착점(Destination)

 

 

 

프로토타입과 프로토타이핑

- 오버플로우: 프레임 밖으로 컨텐츠가 넘어가는 것- 스크롤 되게 하려면 프레임보다 콘텐츠가 더 길어야한다. 안길면 스크롤 되지 않음.

 

💡스크롤 컨테이너(Scroll Container)란?
- 실제 스크롤돼야 하는 콘텐츠와 스크롤 속성을 적용할 컨테이너

1) No scrolling: 스크롤X
2) Horizontal: 가로방향 스크롤
3) Vertical: 세로방향 스크롤
4) Both slides: 가로세로방향 스크롤 가능

 

 

 

화면 디자인 연결하기

💡플로우(Flow)란?
- 프로토타입의 흐름 하나하나
- 트리거와 애니메이션, 액션으로 구성

1) 트리거(Trigger): 액션 시작하는 조건,이유,계기. 내가 어떤 행동을 하냐?를 생각하면됨. 탭을 할거냐, 스크롤할거냐, 확대할거냐, 두번 탭할거냐 등

 

[트리거 종류 10가지] 2024.10 ver

- On click: 클릭, 탭, 터치 - 모바일기기 연결하면 On tab으로 바뀜

- On drag: 드래그

- While hovering: 커서, 마우스가 영역 위에 올라가있는 동안

- While pressing: 커서, 마우스가 영역을 누르고있는 동안

- Key/Gamepad: 특정 키를 눌렀을 때 실

- Mouse enter: 커서, 마우스가 영역 위에 올라가면

- Mouse leave: 커서, 마우스가 영역을 벗어나면

- Mouse down: 커서, 마우스가 영역을 누를때 바로 실행

- Mouse up: 커서, 마우스가 영역을 눌렀다 떼면 실행

- After delay: 일정 시간이 지난 후에 실행

 

 

2) 액션(Action): 트리거로 인해 만들어지는 결과

 

[액션 종류 10가지] 2024.10 ver

- Navigate to: 페이지(프레임)를 이동

- Change to: 컴포넌트의 다른 배리언츠로 변경(트리거가 컴포넌트 적용 됐을때만)

- Back: 뒤로가기

- Set variable: 변수를 특정 값으로 설정

- Set variable mode: 변수를 특정 모드로 설정

변수는 유료plan임. 어쩐지 없더라

- Conditional: 분기점을 만들어서 조건에 따라 A또는 B를 실행

          - Scroll to: 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션

- Open link: 특정 URL을 여는 액션

- Open overlay: 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여주는 액션

= 스크림, 딤드, 딤레이어, 오버레이라고도 불린다!

          - Swap overlay: 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션

          - Close overlay: 라이트박스를 닫는 액션

open overlay는 close overlay와 같이 사용

 

 

---

실습: 프로토타입 만들기

👀실습 1: 프레임에 기본값 적용.

1) 프레임 선택

2) 트리거: On Click. (모바일이므로 On tab이 됨)

3) 액션: Navigate to

 

---

 

3) 애니메이션(Animation): 액션 실행 시 어떻게 실행할 건지

"~하면, ~하게 ~한다"라는 문장으로 기억하면 쉽다.   고는 하는데 이게 좀 더 헷갈린다..ㅋㅋ

ex. 버튼을 누르면(트리거)

     색상이 천천히(액션)

     바뀐다(애니메이션)

어떤 동작을 취하면(트리거) 어떤 결과가 나온다(애니메이션) 어떻게?(액션) 이런식으로 아는 게 좀 더 안헷갈리는듯!

 

[애니메이션 종류]

- Instant: 별도의 애니메이션 없이 즉각 실행

- Dissolve: 페이드인/아웃

- Smart animate: 이름이 같은 프레임들이 자연스럽게 움직이도록 만듦.

 ex. 하단 메뉴바 고정, 메인화면만 우측 슬라이드 가능

- Move in/out: 화면이 들어옴/나감. 종이 빼듯이

- Push: 종이 1장이 이어져있듯이 움직임- Slide in/out: 밀면서 사라지는 효과

 

* 스마트 애니메이트

- 작동하는 요소의 이름이 같아야 함.

- 정상작동 안 될 때 확인해야하는 것:

   ① 움직일 요소의 이름이 같은지

   ② 레이어 구조가 동일한지

- 피그마 프로토타입에서 가장 중요한 애니메이션.

 

[스마트 애니메이트로 조작할 수 있는 속성]

- 크기(Scale) : 크기 커졌다 작아졌다(자연스럽게)

- 위치(Position): 위치 이동

- 투명도(Opacity): 나타났다 사라졌다

- 회전(Rotation)

- 배경색(Fill): 배경색 칠 기능, 다른색으로 변경 기능

 

 

디자인 핸드오프

💡핸드오프(Hand-off)란?
- 손을 떠나다라는 뜻으로, 개발자에게 전달하기 위한 디자인 사양을 정리한 문서.
- 자세하게 작성해야 의도한 디자인대로 개발 가능.

 

예시: Design Systems For Figma | Design To Engineering Handoff

[핸드오프 작성 시 지켜야할 원칙]

1) 통일된 구성: 일관된 구성, 목차로 설명할 것

2) 최대한 자세하게: 모르는 사람이 봐도 어떤 디자인, 목적, 어떻게 만들면 될지 자세하게 적기

3) 쉬운 언어로: 개발자, 기획자도 이해가능한 표현으로 작성

 

 

[핸드오프의 구성]

1) 디자인의 전체적인 구조

2) 각 프레임의 크기 및 길이

3) 각 프레임의 여백 및 간격

4) 사용된 폰트 및 컬러 스타일 등

 

* 선택한 디자인의 핸드오프를 자동으로 만드는 피그마 플러그인

DesignDoc [Spectral]: Measures, Annotations, and Handoff | Figma

예시화면

플러그인에서 'designdoc'검색 - 원하는 프레임 선택 - create 클릭

 

오.. 실제 실무에서도 많이 사용한다고 한다. 쉽고간단한만큼 실제 전달하는 중요한 내용이 빠질 수 있다고한다. 그래서 개발자와 소통후 추가할 내용을 추가해야한다. 생산성이 있으나 결국에는 사람이 다시 봐야한다고 함. 

 

 

 

디자인 공유하기

📌디자인 정리하기

- 왼쪽 패널 File/Pages에서 페이지 이름을 분류하는 방법.

ex. 디자인 / UI키트 (디자인=화면 페이지만 있음 / UI키트 = UI키트만 존재하는 페이지)

- 아이콘 및 요소들이 마구잡이로 배치돼있는 것 정리하기

- shift + S(section) 을 이용해서 분류하기

- 1920*1080 프레임 사이즈 생성(프로젝트의 메인이미지로 쓰일 사진) - 메인 이미지 제작 - 왼쪽 패널에서 해당 프레임 레이어 우측클릭 - Set as thumbnail 클릭. 

이런 썸네일 아이콘이 뜬다면 성공이다. 홈으로 가서 해당 프로젝트 썸네일을 확인해보면 방금 제작된 썸네일로 보인다.

 

📌공유하기

- 피그마 파일 링크 공유하기: 우측 상단 - Share - 'copy link' 

 

 

- 프로토타입으로 공유하기: presentation모드일 때 우측상단 'share prototype'버튼 클릭.

 

 

 

-특정 페이지, 프레임 공유하기

: (프레임) 공유하고싶은 프레임 선택 - 우측클릭: Copy/Paste as - 'Copy link to selection'

: (페이지) 왼쪽 패널 선택한 page 우측 클릭 - 'Copy link to page'

 

 

---

 

WIL(Weekly I Learned)

 

 

팀 소개 관련 미니프로젝트를 발표하는 날이다. 뒤에서 4-5번째 차례였는데 글쎄 발표까지 얼마 안남는 시점에서,

팀원슬랙이 난리났다.ㅋㅋㅋㅋ 손땀 인간들이 속출했고 떨린다고 난리쳐서 다른 팀 발표에 집중이 잘 안됐다ㅋㅋㅋ ㅠㅠ 미쳐

누구는 화장실갔다오고 난리부르스 떨다가 막상 차례오니까 다들 멀쩡한 척. 

 

 

 

 

 

마지막까지 이러다가 발표를 무사히 잘 맞췄고 서로를 격려하고 독려했다.

 

 

팀에서 유도했던 부분에 대해 튜터께서 제대로 캐치를 하셔서 뿌듯했다.팀 역할 분배에 대해 언급하면서 디자인의 톤앤매너를 잘 갖췄고 특히 처음부터 끝까지 기획의 순서도 좋다고 하셨다.하지만 '별'캐릭터와 관련된 컨셉의 전반적인 분위기와 특히 PPT가 일반적으로 디자인 되어 아쉽다는 피드백을 받았다.그리고 앱 프로토타입 시안 부분의 발표가 너무 짧았다며 궁금해하셨다.발표를 보는 모든 캠프 디자이너 분들도 격려의 박수와 재밌는 드립들 덕분에 긴장도 풀리고다들 warm한 분들이라고 생각

 

발표를 마치니 긴장도 풀리고, 그 다음엔 프로젝트를 수정할 일이 남았는데 고칠 시간과 의논할 시간이 없었다.이게 더 중요한데 사실.. ㅋㅋㅋ 어쩔수없지 다음 프로젝트에 집중할 것~!

 

시간에 여유가 있어서 4명이서 옷을 맞춰입고 다같이 댄스를 시전했다

둠둠칫 -

 

 

 

📌지난 일주일 동안 가장 인상 깊었던 배움에는 뭐가 있었나요?

---

1) 컴포넌트

컴포넌트 사용법에 대한 강의를 들어서 했을 때 수월하게 할 수 있을 것이라고 생각했지만

강의에서 한 방향이 아니라 다양한 상황에서 쓰일 수 있는 적용법에 따라

순서, 배치같은 게 달라져서 그 점이 많이 헷갈렸다.

공부를 하며 슬랙 질문방에 올리기도 하고 그렇게 해서 문제를 해결하는 태도를 가졌고

이 외에도 혼자 공부를 하며 의문점을 가지면서 티스토리에 몇 가지 방법을 적어 시도하고

문제를 해결할 수 있었다. 

 

오토 레이아웃과 컴포넌트 사용이 어렵다고 생각했기 때문에

풀리지 않은 문제가 있을 때 적극 해결하기 위해 노력해서 더 기억에 남고 깊이있는 학습을 할 수 있었다.

앞으로 피그마 컴포넌트 기능과 오토레이아웃 기능을 다양한 예시에서 활용하여 적용을 해보고

많이, 좋은 레퍼런스를 보며 연습해야겠다.

 

2) 협업

아무래도 툴을 다루는데 미숙하고 강의에서 배웠던 여러가지 기술들을

실전같이 적용하고 응용해보려니까 쉽지않았지만 중간에 팀원들이 해결해주는 부분도 있었고

내가 도와주는 부분도 있다보니까 혼자 헤메는 것보다 빠르게 나아갈 수 있었다.처음해보는 협업이라 처음은 우왕좌왕 했지만 본격적으로 앱, PPT작업이 들어갔던 날은 각자 할 일을 하며 쭉쭉 나아갔다.어떻게 했을 때 설득과 수용을 잘 할 수 있을지, 고민도 많이 했지만'말하기'는 바로 지금 즉석으로 말해야하는 부분이기 때문에 평소에 얼마나 관련 프로젝트에 대한 경험/지식을 쌓았는지가 중요할 것 같다. "말" 이란 건 평소에 어떻게 생각하고있는지를 기반으로 나타나기 때문에 좋게 생각하고 다양한 지식 및 툴을 학습하는 것이 좋겠다.모든 경험은 도움이 되므로 협업했을 때 좋은 점이 있다면 다 흡수해버릴거다~

 

 

3) 프로토타입

최근 토스에 프로토파이 파일 제출 목적으로 프로토파이를 공부한 경험이 있었다.역시 어려운 걸 한 번 공부하니까 피그마 프로토타입의 구조와 기능들이 쉽게 느껴졌다.하지만 생각보다 쉽지 않은 프로토파이... 함수, 변수 등장에 눈을 의심했다.어느정도 이해는 가지만 정확한 전문 서적이 있으면 해결책을 찾아갈텐데.. 그 방법을 몰라서  답답하던 찰나,튜터님께 프로토파이 공부와 관련해서 질문드렸는데 일단 UXUI에 집중하라는 피드백을 받았다.너무너무 맞는 말씀...ㅋㅋㅋ 욕심이 많아서 한꺼번에 이것저것 하고싶었나보다 ㅠㅠㅠUXUI나 제대로 하고 그 다음엔 비즈니스까지 해보고, 그 다음엔...... 글쎄다!?

 

결국엔 너무 너무 어려워서 제출은 못하고 막무가내로 제출할 PPT를 만들긴했다.너무 짧고 단촐해서 결국 지원하지 않기로했다.프로덕트 디자인에 더 집중해보려고 한다. 욕심 그만!!

 

 

 

---

 

📌 이 상태에서 다음 일주일을 더 잘 보내려면 무엇이 필요할까?

---

1) 디자인 스킬 향상

어려운 건 없었다. 확실하게 자신있다고 느끼는 부분은 기획 및 글 작성부문이었다.

글은 익숙하다보니 쓸 수 있다는 생각이 있지만 디자인만 생각하면 나서서 하게 되는 걸 주줌하게 된다.

그 이유는 아마 다양한 디자인 스킬을 덜 쌓았기 때문이라고 추측한다.

그래서 PPT 레이아웃을 잡아줬을 때도 자신없었던 것 같다. 막상 해보니까 되긴하네~?했는데 ㅋㅋㅋ

못한다는 이 마음가짐도 문제다 문제!!

항상 할 수 있다는 마음 가지기★ (많은 사람들이 쉽게 간과하는 마음가짐이지만 정말 중요하다고 생각한다)

 

UXUI에 필요한 디자인 관련 레퍼런스를 찾아보고,

찾은 레퍼런스를 모작도 하고, 직접 프로젝트에 대입해보며 스킬을 쌓아야겠다 :)

 

 

2) 휴식

일단 지금까지 프로젝트 진행하느라 수고했으니 제대로 쉬는 시간을 가져보려한다.

그렇게 빡세게 일한 건 아니지만 배우고싶은 욕심과 팀원 중 늦게까지 안자는 사람이 있다; (나랑 똑같음)

그 분하고 말하느라 늦게잤습니다.. 이번에 제대로 휴식을 취하고 머리를 비워서

본격적으로 프로젝트를 진행하기 위한 준비를 마련해야겠다.

---

 

 

KPT

---

📌 ①KEEP: 어떤 걸 만족하고있고 어떤 걸 잘하고있을까?

 

 

[만족👍]

디자인을 너무 잘 해주셔서 전체적인 톤앤매너를 맞춘 것.

다른 팀원의 작품을 따라하는 것이 아닌, 독자적인 팀 색깔을 맞추기 위해 노력한 것.

문제점을 찾기위해 모두가 달겨든 것.

 

[잘해요🥰]

팀의 분위기를 정말 중요하게 생각한다.

분위기가 안좋으면 지속해서 일할 수 없기에 오래 함께 일하기 위해서 분위기는 중요하다!

팀원에게 칭찬과 독려의 말을 많~~이 해주는 것은 확실히 잘하고있다고 느꼈다.

그리고 그 힘을 받아 열심히 하려는 모습을 보면 웃음짓게 돼서 나도 기분이 좋다.

생각보다 사람들은 칭찬을 많이 아끼곤 하는데 아껴서 똥된다. 칭찬을 많이 하는 것도 서로의 정신건강에 좋다~~~!!!!!!!

 

이 외엔 기획/라이팅인데 부족한 걸 알지만 그나마 자신있다..... 디자인보다......하하....

 

 

---

📌 ②Problem: 현재 문제라 생각하는 점과 변화가 필요한 점?

 

[자유롭게 말할 수 없는 분위기]

사적인 영역에서의 대화는 괜찮았지만 프로젝트 관련된 의견을 내면서 눈치를 많이 보긴했다.

그럼에도 계속 의견을 내긴 했지만ㅎ! 사실 자유로운 분위기가 아니었다고 생각한다!

암묵적으로 각자가 생각하는 문제를 묵인하고 넘어간 것 같다.

아무래도 처음 하는 협업이라는 점에서 미숙했던 부분이 있었다고 판단했다.

물어봐야 하는 것까지 못 물어보는 상황이 나 뿐만 아니라 다른 팀원한테도 있었던 것으로 보이고

서로 성격에 대한 파악이 없다보니 여러가지 각자가 생각하는 오해도 생길 수 있다고 생각했다.

나 또한 오해한 사람으로서 소통이....참 중요하다고 느꼈다. (ㅈㅎ님의 디자인이 오래 걸리는 이유가 컴포넌트를 만드는 과정이 오래걸렸기때문! 나중에 이해했다.. ㅎ 쏘리요ㅋㅋㅋㅎ)

 

협업 시 팀원간 성향을 파악해야 어떻게 말을 할 지, 이 문제를 어떻게 해결해나갈지에 대한 방법들이 보일텐데

그런 과정을 거치지 않아서인지 서로가 서로에게 눈치를 보는 상황이 발생한 것 같다.

서로 아무 말 안하고있지만 왠지 모르게 느껴지는 ....?ㅋㅋ

 

또오..........

진행했던 프로젝트에 어떤 문제가 있었는지 회고하는 피드백과정이 중요하다고 생각했다.

우린 아직 초보고, 배우는 단계에서 문제점에 대한 파악과 개선 과정이 현재로서 더 중요한데

프로젝트 진행 시, 일 뿐만 아니라 사람에 대한 문제도 있을 것이라 판단해서

피드백 과정이 필요하다고 생각했지만 이 부분은 아쉽게 진행되지 못하였다.

 

 

---

📌 ③Try: 어떻게 더 좋은 방향으로 진행할 수 있을까?

앞으로는 팀원의 성향을 파악하기 위해 성격을 알아가는 단계를 거쳐야 할 것 같다.

업무 스타일이 어떤지, 협업할 때 어떤부분을 가장 중요하게 생각하는지, 무엇을 가장 하고싶은지.

질문을 통해 알아가는 것은 팀워크 분위기와 업무향상에 도움 될 것이다.

 

그리고 자유로운 분위기 속에서 편하게 피드백이 오갈 수 있는 분위기를 만들어야

모두가 만족스러운 환경에서 일하는 게 가능하지 않을까...~~생각해본다.