Day 4 (1주차)
| 시간 | 학습내용 | 소요시간 | 메모 |
|---|---|---|---|
| 아침 | 피그마 2강 과제로 하루를 시작 | ||
| 점심 전 | PM 개론 완강 | 시간이 애매하게 남아서 점심을 빨리 먹음 | |
| Arvo | Figma 3강 | 5시간 소요 | 피그마 오류 + 몰입 X -> 시간을 많이 할애 함 |
| Evening | TIL 작성 | 50분 소요 | 딴 짓하느라 한시간 날림 ^_^ |
PM 개론 Chapter.3 (完)
Agile 환경 속 PM의 단계별 역할 + 비즈니스 커뮤니케이션 기본
[요약]
- PM의 비즈니스 커뮤니케이션 기본이 되는 마인드셋과 상황별 행동요령
- 상대방 중심의 사고와 투명한 정보 공유를 통해 구성원 간 신뢰 형성
- 효율적인 회의 진행 및 마무리를 위한 가이드
1. Mindset
- 원칙 1. 역지사지의 자세: 상대방의 니즈를 기준으로 이야기함.
- 원칙 2. 밑밥 깔기: 진행 과정을 틈틈이 공유하여 예측 가능성을 높임.
- 원칙 3. 크로스체크: 구두 확인 후 반드시 문서화하여 공유함.
2. Action
① 보고
타이밍과 보고 대상을 파악하기
듣는 사람의 관심사와 필요 정보를 공유하며, 중간 보고를 통해 일의 진행 방향이 맞는지 확인함.
② 요청
요청 전 미리 예고(빌드업)하여 상대방의 일정과 업무 맥락을 고려함.
③ 요청 받기 (거절)
'무엇'보다 '왜'를 먼저 파악하자.
요청 수락의 필요성과 중요성을 검토하며, 거절 시에는 대안과 거절 맥락을 명확히 제시할 것.
④ 설득·협상
상대방의 입장에서 이해하고, 내 의견이 상대방에게도 이득이 되는 부분을 어필.
3. 회의 진행
- Don't: 목표 및 사전 준비 없음, 산만한 회의, 결론 없음.
- Do: 명확한 목표 설정 및 사전 준비, 집중도 유지, 결론을 명확히 정리함.
- 회의 마무리: 결정 사항과 액션 아이템을 명확히 작성하여 공유함.
Figma 3강
파운데이션(색상, 폰트 스타일) & 컴포넌트 (마스터/인스턴스)
디자인 시스템의 필요성
주요 UI 요소 (버튼, 텍스트 필드, 컨트롤 설계)
1. Foundation (기본 재료)
[색상]
- 컬러 스타일: 2~3가지 색상 사용.
- Primary color : 포인트 컬러
- Secondary color : Neutral color\
- Background color : 보통 흰색
- Shade 만들기 (확장성)
- 총 10단계로 밝은 단계 ~ 어두운 단계 구성
- 명도는 100이 되지 않도록 98~99로 조정
- 1:3:6 법칙
- 1(Point color) : 3(Secondary) : 6(배경) 비율 권장.
- Style 생성
- 이름은
Primary/900~Primary/50형식./를 사용하여 Style 그룹화.
- 이름은
[폰트 스타일]
-
Family: 폰트 종류.
-
굵기 (Weight)
- 디자이너는 Thin, Light, Regular... Black
- 개발자는 100, 200, 300... 900
-
Size: 16px부터 ± 2px. (16px: 웹 기본 폰트 사이즈)
- 10px 미만 권장 X.
- 20px 이상은 4px 편차 적용 → 제목용으로 활용.
-
행간
- Text-box의 높이를 조절할 때 → box 높이 조절 X, 행간 조절 O.
- 폰트 크기의 % 값 활용. (e.g. 100% → 16px/16px, 150% → 16px/24px)
- 행간 값: 사용자에게 좋은 가독성을 주는가?
- 일반적인 값: 제목(크고 굵음) 120~135%, 본문 135~170%.
- 본문 행간 150%의 장점: 2의 배수 i.e. 확장성 good
- 자간: 글자 사이의 간격.
2. 컴포넌트: 파운데이션의 결합
- Master Comp. (Component): 원본
- 복사 시 인스턴스에 수정 사항 일괄 적용.
- Instance Comp. (Instance): 복사본
- 인스턴스를 수정하면 변경사항 Overrides 마스터 컴포넌트
- -> Override 속성 지우면 Master Comp 속성 상속(Inherit).
- Master 지워도 Instance는 남아있음.
- Instance Detach → Frame으로 변경됨.
3. 디자인 시스템
- 필요성: 효율성 + 일관성.
- For both designer and developer
- 반복적 UI 효율적 관리, 팀 전체가 같은 정도로 이해.
- UI 키트 vs 디자인 시스템:
| 개념 | 비유 |
|---|---|
| UI 키트 | 단어, 재료 |
| 디자인 시스템 | 문법, 레시피 |
- 디자인 시스템 : 문서 형태로 존재하며 종합적인 제품 가이드라인의 역할.
- Pros: 반복 작업 시간 절약, 품질 유지(일관된 품질의 제품 도출).
- Cons: 만드는 과정이 오래 걸림, 필요 스펙에 비해 UI가 과해질 수 있음(과한 리소스 소비), 아이데이션 경직(지속적인 개선 필요).
4. UI의 분류 및 요소
| 분류 | 정의 및 용도 |
|---|---|
| 액션 (Action) | 사용자가 특정 행위를 수행하도록 유도하는 요소 |
| 인풋 (Input) | 사용자로부터 데이터나 정보를 입력받는 요소 |
| 인포메이션 (Information) | 사용자에게 정보나 시스템 상태를 전달하는 요소 |
| 컨테이너 (Container) | 관련 있는 요소들을 그룹화하고 구조화하는 영역 |
| 네비게이션 (Navigation) | 페이지 이동 및 사용자의 현재 위치 파악을 돕는 요소 |
| 컨트롤 (Control) | 설정 변경이나 특정 값을 수정하기 위해 선택지를 제공하는 요소 |
- 위 분류는 절대적인 기준이 아니며, 상황에 따라 유동적으로 변할 수 있음.
- 따라서 분류 체계 자체에 집착하기보다 각 UI가 수행하는 실제 기능을 정확히 이해하고 설계에 반영하도록 하자.
- Pseudo State (의사 상태): 컴포넌트의 가상의 상태. 본질은 유지한 채 상태(스타일 변경, Hover 등) 변화.
[참고]
라벨 = 사용자에게 안내 · 가이드하는 문구
텍스트 = 사용자가 입력하는 문자
# 버튼
- 텍스트 생성
- 텍스트 auto layout
- auto layout 된 프레임에 스타일 적용
- Component 화
# Text Field
Input에 해당. (e.g. Search bar)
유효성 검사(Validation) 포함 (e.g. 비번 조건에 대한 안내)
- 레이블 & 텍스트 생성 (텍스트 - place holder, helper text)
- auto layout 적용
- 스타일 적용
- 전체 파운데이션 Comp
# Control
사용자가 선택지를 특정할 수 있는 요소
-> 체크박스 라디오 토글 슬라이더
- 유의해야 할 것!!
- 터치 영역 확보
- Label 터치 시에도 컨트롤 요소 작동
- 컨트롤 요소 height = line height
# 체크박스 다중 선택
# 라디오 단일 선택
Default size 24x24 (기본 폰트 16px의 행간 150% 적용 값)
- frame 생성 (24*24)
- frame 하나 더 (20*20)
- 체크박스/라디오 그래픽요소 추가 & 스타일 적용
- label&text 생성 (16pt, 150% ->height: 24px)
- 스타일 적용
- 전체 선택 -> Comp
UI 기능주의적 관점 : 컴포넌트의 형태에 집중하기보다 기능에 초점을 맞춰야 함.
오류해결
Clear the Figma desktop app cache
- Figma 데탑 앱에서 컴포넌트 하나 만들었을 뿐인데 자꾸 오류 발생... 앱 캐시 지우고 해결 됨
