[10/28 부트캠프] 카타, 피그마 활용법 강의(1) 1·2주차, 개인과제

 

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

📌To Do List

* 카타: 랜딩페이지

* 피그마 활용법 강의 (1)1,2주차

* 개인과제(숙제)

 

미니 프로젝트가 끝나고 새로운 팀원들과 한 주가 시작되었다.

4조 팀명은 우리탈퇴해요

글램인가.. 어디에서 서로 짝이 성사되면 글램을 탈퇴한다는 의미에서 슬로건을 탈퇴한다 이런식으로 지었는데

우리 조는 수료받고나서 부트캠프를 탈퇴하자! 이런 의미에서 어그로를 끌어봤다.

사실 이 팀명이 너무 별로여서 의견 낼때도 너무 창피했는데 막상 이게 채택되니

괜찮아보이는 매직^^ 

 

오늘 들었던 강의는 기존강의와 달랐지만 겹치는 부분이 많아서 거의 복습하는 느낌으로 들었던 것 같다.

내용도 거의 비슷했지만 한 가지 달랐던 점은 마지막에 이 이론에 대해 이해했는지 확인할 수 있는 문제풀이가 생긴 것.

 

---

 

01 카타: 랜딩페이지

💡카타가 무엇일까?
: 연습해본다
: 레퍼런스를 찾고 왜 이 레퍼런스가 좋다고 생각했는지 말해보는 시간
UX의 근본이며 추후 UX공부했을 때 도움된다고 했다.

 

- 장점: 무엇을 발견하고 어떻게 사고하는 지 기르기 위한 과정 

- 시간: 오전 9-10시 (딱 1시간만!) - 레퍼런스 수집, 발표, 피드백

- 주의사항

  ① 무조건 1시간 안에 수행해야한다. 다른 시간에 찾아보기 금지.

  ② 관련 질문은 카타 시간 안에서만 가능하다. 

 

짧은 시간이라고 생각할 수도 있지만 실제 실무에서도 5분 안에 레퍼런스를 찾는 과정이 빈번하다. 적응하자

다른 시간은 쓰면 안된다고 단디 주의를 주셨다. ㅜㅜ 찾아보고싶었지만 연습을 위해 참아야겠다

 

30분동안 찾은 레퍼런스들은 이렇게. 2-3개만 더 찾으면 될 것 같다.

 

---

02 피그마 활용법 강의 (1) 1,2주차

 

* 피그마 : 가장 뛰어난 디자인 협업 툴

[제품 제작 과정]

아이데이션 - 와이어프레임 플로우차트 - UI 설계 디자인 시스템 - 프로토타이핑 - 개발 핸드오프

💡아이데이션(Idation)
idea + ation = 아이디어가 만들어 지는 과정

 

[피그마 특징]

- 언제어디서나 작업 가능: 웹 사용 가능, 맥/윈도우 사용 가능

- 디자인부터 개발까지: 절반은 디자인 기능, 절반은 개발 관련 기능

- 강력한 커뮤니티: 풍부한 커뮤니티 자료(각족 플러그인, 디자인 자료)

- 쉬운 학습: 금방 배울 수 있다.

 

[피그마 vs 피그잼]

💡피그잼
- UX기획 및 아이데이션에 특화
- 어떻게 만들지 고민하는 과정, 논의 -> 린 캔버스, 더블 다이아몬드, 사용자 여정 지도 등

 

 

피그마 계정 생성하기

엇.. 피그마를 배우기 초반에 배웠어야 하는 게 아닌가 싶었다! ㅋㅋ 이 내용은 슈욱 넘겼다

 

[계정생성법]

- 피그마 홈페이지  - "get started for free"버튼 클릭 - 로그인 or  계정생성

 

[피그마 파일 다운]

- 피그마 웹 보다는 앱을 설치하여 사용하는 걸 추천!

- desktop app 선택 후 컴퓨터에 맞게 OS/Window로 설치한다

 

[피그마 핵심 '커뮤니티']

- 서드파티(3rd-party): 서비스 제공자가 아닌 사람들이 자체적으로 만드는 것

① 가격 확인: 유료/무료 섞였다. 라이선스, 가격 확인할 것.

② 저작권 확인: 개인적인 사용으로만 허락하는 경우 존재할 수 있으니, 저작권/라이선스 확인

③ 문제발생 시, 제작자에게 직접 문의

 

모든 파일은 Draft에서 만들고 필요 시 팀프로젝트로 이동할 것.

 

피그마 툴 사용 방법의 기초에 대해 다시 설명해주셨다.

도형만들기, 상황별 사진이미지 적용법 등.

 

[Export]

1x: 원본 그대로

2x: 2배....

 

[피그마 파일 저장]

- 피그마 = 서버 클라우드에 저장해야한다.

    -> 클라우드에 메모 남겨서 저장하는 법: file - Save to version history - title/Descripe what changed작성 후 저장

    -> Show version history - 클라우드에 저장된 메모를 우측 패널에 Version history에서 확인 가능

   -> 그 전 기록을 누르면 이전 기록으로 돌아갈 수 있다. 다시 돌아가고싶다? show version history가서 다시 복구! (클라우드 저장이기 때문에 이렇게 할 수 있다)

- file - Save local copy

- 파일 불러오기: 피그마 메인 우측 상단 import - .fig파일 불러오기

 

---

1주차 숙제

 

이렇게해서 패스파인더로 가운데만 남게 만들면 끄읕! 나머지는 뚝딱 끝냈다.

 

---

02 피그마 활용법 강의 (2)

🤔코드는 디자인을 어떻게 해석할까?

1) 디자인 코드로 변환

2) 이 때, 코드는 디자인을 레고처럼 쌓는다 (네모난 박스 영역 만듦 = 박스모델)

 

💡프레임 (그룹이 아닌 이걸로 써줘야한다!)
: 피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체
: 실제 코드로 바꿀 수 있다.
: 개발에 필요한 속성 적용 가능

💡그룹
: 여러 개체를 하나로 담는 기능 (디자인 정리하는 용도) -> 자주 이용X
: 속성 적용 불가

💡레이어
- 상하좌우, 앞뒤 입체로 쌓인다. UI의 멀고 가까운 정도.

레이어라는 개념 설명을 역시 좀 어렵게 설명해주시는 ㅠ 투명 종이를 차곡차곡 쌓는다고 생각하면된다!

 

기본적으로 포토샵, 일러스트 알면 다 아는 기능! align의 개념을 들었다.

 

 

💡오토레이아웃
: 레이아웃에 유연함을 만들어주는 기능.
: 크기가 바뀌어도 유연하게 대응할 수 있게 만들어주는 역할

 

[코드 블록의 구조]

- 패딩(Padding): 실제 블록의 사이즈가 되는 내부 여백

- 보더(Border): 실제 코드 블록의 테두리

- 마진(Margin): 코드 블록 바깥 여백, 다른 코드 블록과의 여백

 

 

[컨테이너가 만들어지는 원리]

- 오토레이아웃은 개체를 패딩으로 감싼 컨테이너를 만들 때 사용

- 개체 크기 + 패딩값

- 얼만큼 간격으로 몇 개를 쌓을 건지 오토 레이아웃으로 자동 조절할 수 있다.- 콘텐츠를 패딩으로 감싸 컨테이너를 만든다.

 

 

 

1) 컨테이너 1과 컨테이너 2를 만든다

2) 컨테이너 1: 그냥 오토레이아웃 적용

3) 컨테이너 2: frame + 오토레이아웃 적용하면 다른 형태의 오토레이아웃이 생성된다. (레이아웃 배열은 똑같지만 패딩값이 달라짐)

 

빨강: 수직 방향 정렬

파랑: 수평 방향 정렬

초록: 일정 부분 이상 넘어가면 다음으로 넘어감

 

동그라미 친 것의 align을 맞출 때 부모 프레임에 적용할 것!

 

 

❗오토레이아웃 레이어 순서는 일반 레이어와 반대다!
원래는 아래에 있을 수록 밑에 있는 레이어지만, 오토레이아웃에서는 밑에 있는 레이어일수록 더 앞에 있다!

레이어에서 순서를 변경하면 그대로 반영됨.

 

 

💡컨스트레인트
- 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한한다
- 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있다.
반응형 웹, 앱 제작 시 사용하는 방법

 

 

---

실습

1. 200*100 frame에 Child Container 이름명 수정

2. 1보다 크게 만든 frame에 Parent Container 이름명 수정

3. 1을 2로 넣는다. 1의 주변에 파란 점선이 보일 것. 그게 바로 컨스트레인트!

우측에 포지션 패널에서 확인 가능.

 

 

상단 우측정렬을 눌렀더니 컨스트레인트도 같이 오른쪽으로 바뀌었다.정렬은 하는 것은 우측으로 위치 이동만 하는 것 뿐만 아니라 컨스트레인트(어디에 고정할것인지)도 바꿀 수 있다.- 컨스트레인트를 left+right, top+bottom : 객체의 사이즈가 비율에 따라 커지고 작아짐.

 

💡리사이징
- 부모의 리사이징값에 따라 자식의 리사이징 값도 달라진다.
- 자식의 리사이징값에 따라 부모의 리사이징 값도 달라진다.

 

[리사이징 종류]

1) Fixed: 고정값

2) Hug: 자식 컨테이너의 크기에 맞춰 조정 / 부모만 쓸 수 있음 (자식 컨테이너의 길이가 변하면 거기에 맞출게!)

3) Fill: 부모 컨테이너의 크기에 맞춰 조정 / 자식만 쓸 수 있음 (부모 컨테이너의 길이가 변하면 거기에 맞출게!)

 

 

2주차 숙제

오토레이아웃 적용했을 때와 컨센트레인트 적용했을 때 중복되는 기능이 있어 좀 헷갈렸다.

그리고 응용으로 나아가니 좀 헷갈리기 시작...

오토레이아웃과 컨센트레인트가 너무 헷갈렸다. 어떨땐 오토레이아웃, 어쩔땐 컨센트레인트를 써야할지 감이 좀 안잡히긴하는데

하다보면 익숙해질거라 생각한다.

 

---

 

 

팀원들의 성격을 파악하기 위해 질문지를 작성하여 저녁 스크럼 시간에 각자 말해보는 시간을 가졌다.

다들 동의해주시고 말을 잘해주셔서 너무 감사했음..

 

 

* ㅅㅅㄷ님

1. 업무 성격

- 팀장: 주도해서 일 분담하는 타입X, 아이디어내고 마지막 의사결정만

- 팀원: 팀장믿고 시키는 일만 함. 의견 많이 제시. 팀원 의견과 타협해 중간점 찾음.

- 꼼꼼한 스타일X. 덤벙~

- 책임감 有, 1등하면 좋지~  

 

2. 선호하는 팀의 방향성

- 팀을 믿고가는 게 중요. 믿음! 의심X.

- 방향성: 서로 의견 내며 발전시키는 게 좋다 (ex. 각자 디자인 만들고 1,2,3,4 중에 골라! 보다는 이게 좋겠다~ 저게좋겠다~)

3. 선호하지 않은 팀원, 이런건 안했으면 좋겠다!

- 본인 자아가 너무 강한 사람
- 자기 스타일대로 가는 사람
- 겸손하지 않은 사람
- 상대방에 대한 존중이 없는 사람
- 눈치 없는사람: 상황파악 못하면 싫어요

4. 피드백 시간 가지는 것에 대한 생각: 긍정적

* ㅅㅇㅈ님

1. 업무 성격

- 생각 많고 신중한 편.

- 적극적으로 의견 내세우지X. 팀원 의견 듣다가 비슷하면 그 때 의견 냄. 의견 다를 때 소통으로 맞춰가는 편.
- 고민, 문제 발생하면 물어봄

2. 선호하는 팀의 방향성
- 조그만 문제라도 힘들어하거나 고민하는 팀원 있으면 서로 도와줘서 해결하는것이 좋다.

3. 선호하지 않은 팀원, 이런건 안했으면 좋겠다!

- 상대의 말을 경청하지 않는 태도

- 작업하다가 문제 발생해도 말하지 않고 혼자 하는 자세. 나중에 얘기하면 차질이 생기고 일의 효율을 떨어뜨리니 미리 말해줬으면 좋겠다.

4. 피드백 시간 가지는 것에 대한 생각: 긍정적

* ㄱㄴㅇ님

1. 업무 성격

- 아이디어 많음. 적극 어필보단 의견을 모으는 편. 주장 잘하는 편X

- 팀장일 때 정하고 팀원일 때 따름.

- 팀장이면 팀원보다 잘해야한다는 부담감이라 아는 게 없을 때 팀장하면 죄송스러운 마음.

 

2. 선호하는 팀의 방향성
- 자유로운 의견과 다수결 좋아한다.

- 여러가지 의견 중 최대한 좋은 결론 내는 게 좋다고 생각.

- 하다가 안나오면 한 명이 결정해줬으면 좋겠다.

3. 선호하지 않은 팀원, 이런건 안했으면 좋겠다!

- 약속 시간 안 지킴

- 책임감 없는 사람

- 맡은 업무 제대로 하지 않는 것

- 불성실한 태도

4. 피드백 시간 가지는 것에 대한 생각: 긍정적


*나

1. 업무 성격

- 아이디어 많음. 

- 근거 있는 주장 하는 편

- 커뮤니케이션/소통 중요시함

 

2. 선호하는 팀의 방향성

- 자유롭게 소통하는 분위기: 불만이나 힘든 사항 혼자 생각하지 말고 말할 수 있는 분위기

 

3. 선호하지 않은 팀원, 이런건 안했으면 좋겠다!

- 결정이 나지 않는 사항이 생기면 다른 팀원분께서 어떻게 생각하시는지 의견을 냈으면!

- 불만이나 힘든 사항 혼자 생각하지 말고 팀원과 함께 얘기했으면 좋겠습니다..

 

4. 피드백 시간 가지는 것에 대한 생각: 긍정적