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

 

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

📌To Do List

* 카타: 랜딩페이지

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

* 3주차 개인 과제 (숙제)

 

피그마 기초 강의를 1주차에 한 번 들어서 모르는 내용이 없을 줄 알았는데

그리드와 반응형, 적응형 이론이 추가됐다.

 

---

 

01 카타 랜딩페이지

 

찾을때 내가 기획자라고 생각하고 어떤 기준으로 찾았는지 / 사용자라고 생각해보기
목적이 정확한 페이지: 이벤트 페이지, 제품 상세 유도 페이지.

 

어제 시간이 없어서 못했던 랜딩페이지에 대한 토론을 진행했다.

최소 3개의 레퍼런스를 찾아서 다함께 좋은 레퍼런스인지에 대한 사고력을 기르는 과정이다.

좋은지 안좋은지 판단이 제대로 안됐고 분석이라는 점에서 좋은 의견 내기가 쉽지않았다.

안좋은 점만 눈에 들어오는..ㅎ 근데 다른 팀원들이 좋은 것 같다! 에 대한 의견을 냈는데

그럴 수도 있겠네 싶었다.

 

 

의견 1

캐러셀형식이라 혜택이 얼마나 더 있지? 하고 넘겨볼 것 같다. 

 

캐러셀(Carousel) 화면 예시

[랜딩페이지]

- 랜딩페이지 기획시 스크롤 하게 만들어야한다.

- 랜딩페이지 상단: (히어로 영역 '헤드라인') 문구, 이미지, 동영상 활용 가능, 혜택이라기보다는 랜딩 상태페이지로 보면 좋을 것 같다. 
- CTA버튼: 사용자의 행동을 유도하는 버튼 (버튼 한개이상 사용해도 괜찮다)
                    문구는 달라도 동일한 페이지로 이동

- 유의사항 넣으면 좋다. 
- 문의내용 같은 것도 넣으면 좋다. 왜냐하면 이걸 통해서 관심의 척도를 알 수 있기 때문!

특히 튜터님이 마지막에 '이마트 네이버점'이라는 문구가 신박하면서 새로운 접근이었다고 말씀하셨는데 오잉 그렇네? 싶었다. 그냥 조금 정신없다는 느낌밖에 안들었는데 나는 깔끔한 느낌이 좋나보다 ㅋㅋ

지금 다시보니까 "클릭, 클릭하면, 미션 클리어!" 라는것도 왜 이렇게 자꾸 반복하는거야 정신없다고 생각했는데

클릭을 2번 얘기하면서 어떤 이벤트인지 예상 가능하게 유도한 것으로 보인다.

이렇게 찾는 건가보다..ㅋㅋ 괜찮은 레퍼런스같다!

 

 

각오 한마디도 했다. 내 각오는

"모두의 사고를 다 내껄로 만들거다"라고했는데 왜케 재수없지...ㅋㅋㅋ 포부라고 생각하고 말한건데..

 

 

내가 찾은 레퍼런스의 일부다.

전에 한창 영어공부에 관심있었을 때 인스타에 떠서 랜딩페이지로 진입한 것을 기억하고

유도해서 인스타에 저 광고가 뜨도록 만들었다. 들어가봤는데 랜딩이 생각보다 나쁘지않아서 겟했다.

 

 

---

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

 

📌디스플레이와 픽셀, 배수

💡디스플레이
:디지털 화면들 (TV, 핸드폰, 전광판, 모니터 등)
:디스플레이는 픽셀로 이루어져있다. 

💡해상도
: 디스플레이의 선명한 정도
: 디스플레이 안에 들어가 있는 픽셀의 개수 (많을수록 해상도 좋다)
: 픽셀의 개수: 가로줄*세로줄
ex. 1920*1080 => 가로:1920개의 픽셀, 세로 1080개의 픽셀. = 2,073,600개

 

 

[해상도와 픽셀의 관계]

1) 해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커진다.

 

2) 화면 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아진다.

 

 

3) 일반적으로 화면 크기가 클수록 해상도도 높다

그래서 모니터가 큰 것을 사야 화질이 좋다고 느끼지만 예외는 있다.

맥북 프로같은 경우, 해상도가 좋기때문에 (2560*1600) 일반 모니터보다 화질이 좋다.

 

 

4) 면적당 픽셀 갯수가 많으면 더 세밀한 묘사가 가능하다.

 

 

이것을 기반으로 모바일 앱 사이즈를 어떻게 만들까?

 

 

 

자세한 배경을 설명해야 왜 기본 사이즈를 ㅇㅇㅇ으로 해야하는지 이해가 명확해질 것이다.

 

세가지 모두 다른 사이즈이지만, 앱은 항상 같은 모양이 디자인을 유지한다. 어떻게 유지하는 것일까?

 

세상엔 아주 다양한 핸드폰 기종이 있다. 아이폰, 갤럭시, 샤오미, 화웨이, HTC, 에이서 등..

하지만 종류가 너무 많으므로 기준이 되는 사이즈 하나를 정해서 디자인을 해야한다.

이 사이즈를 1배수 디자인 이라고 한다.

 

💡1배수 디자인 (모바일, 웹 모두 포함)
- 원본 사이즈 (1배 = 100%)
- 배수 = 픽셀배율 (기기 만들고 출시할 때 정해진다)
- 사람들이 가장 많이 쓰는 사이즈가 일반적이다.
❗유의: 내가 만들 앱을 쓸 사람들이 기준이 돼야한다.

 

디바이스 별 픽셀 배율 및 해상도 확인하기

 

- 스마트폰의 발전으로 1배수 사이즈도 커졌다

(기존) 아이폰: 320*480

        안드로이드: 360*640

(현재) 아이폰: 375*812 (권장)

        안드로이드: 360*800 (권장)

 

 

1배수 사이즈: 375*812

기기 해상도: 1179*2556

왜 이렇게 많이 차이날까?

 

Pixel Ratio 3.0은 3배를 한 값이라는 뜻. 1배수를 3배해야 해상도 크기에 맞다.

 

[1배수 디자인이 스마트폰에서 구현되는 과정]

1) 1배수 디자인 개발

2) 렌더링: 기기는 코드를 읽고 디자인으로 바꿔, 자기 배율만큼 확대 or 축소한다.

    ex. 375*812 디자인을 3배 확대하여 1125*2436으로 만든다

 

 

3) 업스케일, 다운스케일: 기기 실제 해상도에 맞게 미세 조정을 마친다

🤔왜 또 미세하게 조정하는걸까?

→ 모든 기기들의 가로*세로 비율이 같지 않아 실제로 배율만큼 확대/축소 시, 실제 해상도와 차이가 조금씩 생긴다.

줄이는 건 다운스케일, 키우는 건 업스케일이라고 한다!

 

 

 

📌분기점과 그리드

💡분기점
: 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점

 

왼쪽부터 모바일, 태블릿, 데스크탑 버전의 스파르타코딩클럽 화면

[분기점이 중요한 이유]

웹사이트 방문 시 주로 스마트폰의 웹브라우저를 사용하지만, 태블릿, 데스크톱, 노트북으로도 웹사이트 방문.

이때, 웹사이트는 우리가 쓰는 디바이스 화면 크기에 따라 다른 디자인을 보여준다.

👆만약 노트북으로 접속했는데 모바일 화면이 나온다든가, 모바일로 접속했는데 데스크탑 화면이 나온다면 불편할 것!

 

[일반적인 분기점 정하기]

- 가로 길이를 기준으로 한다

① 데스크탑 화면: 가로 1024px 이상

② 태블릿 화면: 가로 768px이상, 1024px 미만

③ 모바일 화면: 가로 768미만 (최소 사이즈 고민할 것. 너무 작아지면 레이아웃이 깨진다)

 

[분기점 정할 때 생각하면 좋은 것]

1) 태블릿 해상도에 대응하는 것

- 태블릿 생략하는 경우 ↑: 태블릿 사용자가 데스크톱과 모바일에 비하면 적기 때문이다.

- 반드시 고려해야하는 경우: 온라인 강의, 교육

2)일반적인 해상도 말고 다른 해상도를 정하고 싶다면?

- 다른 분기점으로 정해도 된다.

- ❗주의: 데스크톱, 태블릿, 모바일 각각에 해당하는 해상도로 잘 나눠야한다. 그렇지않으면 태블릿으로 열었는데 데스크톱 디자인, 데스크톱을 열면 태블릿 디자인 나올 수 있음.

- 디자인에 유용한 통계자료

: 디자인할때 필요한 웹브라우저 점유율, 해상도, SNS 점유율 등의 통계 제공.

전세계 화면 해상도 사용 비율 관한 통계 (2022.11 - 2023.11)

사이트 접속해서 그래프의 원에 마우스를 올리면 제일 많이 사용하는 해상도 기준을 알 수 있다.

이 외에도 웹브라우저 점유율, 검색엔진, OS 점유율 등 확인 가능하다

 

 

💡 그리드(Grid)란?
(원칙이 아닌 가이드라인으로, 반드시 있어야 하는 건 X)
- 화면에 디자인을 배치하는 가이드라인
- 가상의 선을 긋고 그에 맞춰 레이아웃을 짤 수 있다

디자인이 어색하고 정렬되지 않은 것 같은데... 싶을 때 그리드 사용하기

 

[그리드를 사용하는 이유]

- 편집 디자인에서 쓰는 용어 → 종이 문서가 디지털 문서로 바뀌었을 뿐, 균형감, 일관성, 완성도를 위해 사용.

 

[그리드 만드는 방법]

💡칼럼(Column)이란?
- 그리드 = 세로 방향의 기둥들, 이 기둥들을 칼럼이라고 한다.
- 12칼럼 그리드: 12개의 기둥을 사용하는 레이아웃. (일반적으로 데스크톱 화면을 기준으로 12개의 기둥 사용)
                                12개 이상일 때, 반응형 디자인/개발에 어려움.
🤔왜 하필 12개일까?

① 12 = 짝수, 1,2,3,4,6,8,10,12로 나눠 유연하게 배치할 수 있다.

② 모바일 웹디자인: 기둥 4개 배치해서 사용
     디자인을 반응형으로 확장하기 위해 태블릿에선 2배인 8개, 데스크톱에선 3배인 12개로 사용하면서 12개가 일반적인 기둥 수로 자리잡음.

 

 

[그리드의 구조]

① 유닛(Unit): 실제 콘텐츠를 정렬하는 기준선

② 거터(Gutter): 유닛과 유닛 사이의 여백

- 칼럼 끝에는 거터 절반이 남는데, 좌우 여백으로 사용.

 

 

[자주 사용하는 그리드 예시]

 

1) 960 12 Column Grid / 유닛: 60 , 거터: 20 (한 칼럼당 80인데 12개니까 960)

2) 1200 12 Column Grid / 유닛: 76 , 거터: 24

 

3) 1440 12 Column Grid / 유닛: 96 , 거터: 24 (최근에 등장. 사람들의 모니터 사이즈가 커졌음을 알 수 있다)

 

 

 

📌8포인트-그리드 디자인

💡8포인트 그리드
- 간격, 크기 등 8, 16, 24, 32 ... 로 맞추는 방법
- UI 사이 간격, UI 여백, 크기 등 8의 배수로 조정.

 

[8포인트 그리드 사용하는 이유] - 팀효율성 ↑

- 다른 디자이너나 개발자는 처음 보는 디자인을 보더라도 그 규칙을 적용하기 쉽다 (서로 물어보는 번거로움, 비효율성 사라짐)

 

 

[🤔왜 하필 8인가요?] - 디자인에서 완벽한 숫자!

- 0.75배, 1.5배, 1.25배, 2배, 3배, 4배일 때 깔끔하게 떨어진다 (소수점, 홀수X)

- ❓10을 기준으로 하면 안되나요? 홀수, 소수점이 생긴다.

 

 

📌반응형과 적응형

💡반응형 디자인(Responsive Design)
- 해상도 변화에 실시간 반응.
- 하나의 디자인을 놓고, 화면 크기의 움직임 감지해 실시간 반응
- 장점: 하나의 디자인 
- 단점: 만들기 어려움 (하나의 디자인을 3개의 디자인에 적용할 생각으로 제작해야함)

💡적응형 디자인(Adaptive Design)
- 해상도가 변해도 반응X, 실시간으로 변하지X (고정)
- 디자인을 처음 화면에 띄울 때 화면의 크기 감지해 정해진 디자인만 보여줌
- 장점: 만들기 쉬움
- 단점: 관리가 어렵다

반응형 적응형 섞어서 사용하기도한다.

 

---

 

실습: Desktop, Tablet, Mobile 그리드 설정하기 

단축키 shift + G

 

 

1) Desktop: 12포인트 그리드

- Type/Center : 데스크탑 같은 경우, 실제 가로폭 사이즈 더 커서 공간을 확보할 여지있기때문.

 

 

2) Tablet: 8포인트 그리드

- Margin주는 이유: 타블렛은 가로차이즈가 차야한다. 너무 가장자리 붙지 않도록 억지로 사이드 여백을 줘야한다.

- Type. Stretch주는 이유: 

 

 

3) Mobile: 4포인트 그리드

 

Responsive플러그인 저장하기 (피그마 앱 내 커뮤니티에 들어가서 responsive 검색)

: 반응형 디자인을 해주기 위한 플러그인

 

 

방금만들었던 frame 3개 선택 후 responsive플러그인 실행하면 하단 이미지처럼 너비값이 체크됨.

 

 

다시 새로운 1920*1080 프레임 생성 - responsive frame 눌러주면

새로운 프레임에서 자동적으로 1920*1080에 맞는 사이즈의 그리드값이 적용된다.

 

 

프레임의 가로 화면값을 줄이면 일정한 영역은 Tablet그리드로,

일정 영역까지 더 줄이면 모바일 그리드로 변한다.

 

 

아 잠깐만.. 그리드 배우고싶었는데 이거는 조금! 헷갈리면서도 이해할 것 같으면서도..

그리드도 1배수 기준으로 만드는 것 같다.

전에 작업했을 때 그리드가 도움이 됐나 했을때 아니라고 생각했는데

그리드로 디자인을 어떻게 해야할지 좀 배워야 할 것 같다.

---

📌디자인 시스템

[디자인 시스템 목적]

1) 반복적인 UI를 효율적으로 관리

2) 팀 전체가 일관적으로 이해

 

[디자인 시스템 장단점]

*장점

① 반복되는 디자인에 개발코드까지 연결해서 저장해두면, 시간과 비용이 줄어든다

② 누가 만들어도 동일한 품질의 제품 설계 가능

 

*단점

① 다양한 형태의 UI를 하나로 통일하는 과정이 오래 걸린다

② 필요한 건 몇 개 없는데, 그에 비해 UI가 많아질 수 있다

- 업데이트 하는데 들어가는 노동력이 많아질 가능성.

③ 새로운 디자인이 필요할 때, 디자인 시스템을 활용하려다 보니 혁신이 줄어든다.

- 새로운 아이디어, 다양한 형태 UI제작에 소극적으로 변할 수 있음.

 

 

[UI키트와 디자인 시스템의 차이]

- UI키트: 단순히 UI를 모아둔 것.

 

 

- 디자인 시스템: UI의 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀있는 문서. 문서의 형태를 갖추고 있어야한다.

 

❗유의점:

- UI키트만 존재하는 것은 나쁜 것이 아니다. 

- 디자이너와 개발자의 합이 잘 맞고 팀 인원 적으면 UI키트로 빠르게 만드는 게 효율적이다. (팀, 제품상태에 따라 유연하게 선택할것)

 

 

[디자인 시스템의 구성 요소]

1) 파운데이션: 기초 재료 (컬러, 폰트, 레이아웃, 곡률, 간격 등)

2) 컴포넌트: 기초재료를 이용해 만든 구성품 (버튼, 체크박스, 탭, 바텀시트 등)

 

 

[아토믹 디자인 시스템]

*UI 기능 요소

- 버튼 하나에 다양한 요소들로 구성돼있다. 이 요소들 그 자체로는 기능을 가지고있지 않다.

- 이 요소들을 모아 '버튼'이라는 UI로 결합해야 '눌러서 작동시킨다'라는 기능이 생긴다

 

 

- 기초 재료들은 세상을 구성하는 가장 작은 알갱이인 '원자'에 비유할 수 있음
- 원자를 모아, 분자를 만드는 게 아토믹 디자인 시스템의 핵심.

- 원자를 결합해서 기능할 수 있는 최소 단위의 분자를 만든다
-  대부분의 디자인 시스템은 이 원리를 바탕으로 가장 작은 원자 요소들을 설계하고, 그 원자들을 모으고 결합하는 규칙을 만들어서 우리가 아는 버튼, 체크박스, 바텀시트, 모달 등을 만들어 내요.

💡 원자는 영어로 Atom이에요. 그래서 ‘원자를 결합하는 개념의 디자인 시스템’을
Atomic Design System으로 불러요.

 

아주 상세한 단위로 쪼개서 최소한으로 만들수있는 기능을 만드는 것이 아토믹 디자인 시스템이라고 이해하면 될까?

어떤 상황에서 이 단어를 사용하는지 궁금하다. 이게 해결되면 100% 이해 가능할듯!

 

 

[참고 디자인시스템]

1) 머터리얼 디자인

Material Design

 

- 디자인의 기본 가이드로 많은 디자이너들이 추천하는 만큼 처음부터 끝까지 정독해봐야겠다. 시간이 언제되려나

 

2) 라인 디자인 시스템

LINE Design System for Messenger

 

- 어떻게 말을 해야하는지에 대한 가이드 정의 (ex. 오류났을 때 보이스톤)

 

 

3) 밀리의 서재 디자인 시스템

millie Design Library 2.0

 

4) 라이트닝 디자인 시스템

Lightning Design System

 

5) 디자인 시스템

Design Systems Database

 

이런 게 있으면 구독 신청해서 이메일로 받아보는 것을 추천했다.

디자이너 할 일 왜케 많아 진짜..ㅋㅋㅋ

 

 

 

📌파운데이션

💡파운데이션
- 구성품인 컴포넌트를 만들기 위해 사용하는 공통 재료
- 디자인 시스템을 이루는 기본 재료

 

[파운데이션 구성]

1) 색상 (Color)

2) 서체 (Font)

3) 아이콘 (Icon)

4) 레이아웃 (Layout)

- 간격, 여백 (Spacing, Gap)

- 곡률 (Radius)

- 그리드 (Grid)

- 고도 (Elevation)

 

 

 

📌컬러 스타일

- 디스플레이는 빛의 3원색으로 구현

* 빛의 3원색: RGB (Red, Green, Blue) - 모일수록 밝아짐

                                                                         - 빛은 뺄수록 까매지기 때문에 감산혼합

* 색의 3원색: CMY (Cyan, Magenta, Yello) - 색은 섞을수록 까매지므로 가산혼합

 

 

 

[Hex Code의 원리]

컴퓨터는 R,G,B를 각각 256가지의 값으로 보여줄 수 있음.

 

 

이 각각의 숫자를 컴퓨터는 16진수(Hexadecimal)로 변환해서 읽는다.

 

Hex Code: 16진법으로 작성된 코드

 

 

[컬러 프로파일]

- 디스플레이가 코드 해석 시 사용하는 색 기준표 

- 전 세계적으로 사용 할 수 있어야하기 때문에 공신력 있는 기관이나 기업에서 만들어서 배포.

ex. Adobe RGB, sRGB 등

- 컬러 프로파일마다 더 보여주는 색의 범위 다름.

DCI-P3와 Adobe RGB를 비교해보자.

어도비에 비해 초록색 부분 적음. 대신 빨간색 쪽으로 더 넓게 분포되어 있으므로 빨간색을 더 정교하게 표현 가능.

- 디스플레이 뿐만 아니라 프로그램 자체에도 컬러 프로파일이 조금씩 다르다.

 

 

[컬러스타일] 실무에서 색깔 정할 때 몇 달 동안 수십가지 색상을 테스트하여 분석.

💡컬러스타일
- 디자인 시스템에서 사용할 색상을 모아두는 팔레트

 

 

[컬러스타일 만드는 방법]

1번. 2~3가지 색상 만들기

① 포인트 컬러(액센트 컬러): 중요하고 핵심적인 색깔

② 메인 컬러: 배경색 = 백그라운드 컬러 포인트컬러와 의미가 헷갈릴 수 있을 듯 ㅠ

③ 세컨더리 컬러: 배경색에서 도드라지는 포인트 컬러를 뒷받침하는 색상. =서브컬러

기본적으로는 가장 기본 메인컬러와 배경으로 깔아줄 컬러만 정해도 좋다고한다. (토스 = 파랑)

 

 

2번. 10단계 만들기(가장 밝은단계~가장 어두운 단계)

 

📌색상의 확장성

- 다양한 상황에 대응할 수 있도록 유연하게 만들어야한다.

ex. 강조, 덜 강조할 필요가있을 때 유연하게 컬러 사용 가능

 

🤔왜 10단계인가요?

1) 명도, 채도 기준으로 0%에서 100%를 10단위로 나눌 수 있다

2) 10단위로 떨어지기 때문에, 중간에 50단위 색상을 추가하기 쉽고 색상 간의 차이도 10단위다 보니 알아보기 쉽다.

 

-> 메인컬러 10단계를 만들었다면 회색조도 10단계 만들기

 

 

[1:3:6 법칙] 전체적인 균형, 집중도 ↑

 - 1:3:6 법칙을 꼭 따를 필요X (포인트 컬러는 중요한 색상이지, 많이쓰는 컬러X)

 

---

실습: 컬러스타일 만들기

1. Coolors 플러그인 즐겨찾기 후 피그마에서 실행하기
- 원하는 색상에 어울리는 색 추천해주는 플러그인

① 포인트 컬러 하나 정하고 잠그기
② 5가지 중 2가지 remove (컬러스타일 총 3개 만들것)
③ Generate 클릭하며 컬러를 정한다
❗이 때 포인트 컬러와 색깔이 비슷하면X

 

내가 만든 3개의 컬러다.

 

2. Rectangle 박스 컬러를 지정한 hex code컬러로 변경한다.

3. 박스를 10개 복제한다 (ctrd+D)

 

 

4. 색상 명도 조절

① 첫 번째 박스 선택 후 Fill - Hex를 HSL로 변경 (색조,채도,밝기)
② 제일 끝(3번째)에 있는 명도를 조절(ex. 35라고 적혀있으면 35를 기준으로 10씩 빼거나 더하기)
❗유의점: 간혹 50이런 숫자가 나온다. 이럴 경우 완전 블랙컬러 혹은 흰색컬러가 나오니 색깔 조절하기

 

엇 90이 나왔다. 이럴경우 끝에 있는 숫자가 0이 안나오게 다시 수정하자!

엥.. 두번째 그린컬러의 채도가 너무 높아졌다 이거 왜이래요...?ㅠㅠㅠ

질문방 바로 올리기!

이렇게 친절한 답변을 해주셨다~~

 

 

 

 

5. 색상 컬러명 지정하기

① 컬러 10개 모두 선택
② 레이어 패널 - Rename - "Tertiary/"까지만 입력
③ Number ↑ 버튼 - Start ascending from "0"으로 설정
④ 네임을 보면 $nn이 00,01,02,03,04 이렇게 시작하고있다. 따라서 50-900을 만들려면 뒤에 00을 붙이고 앞에 n을 하나 지워주기!
⑤ "Styler"플러그인 저장 - 전체선택 - 우측클릭 플러그인에서 styrler - generate styler.
- 지정한 색깔을 팔레트로 만들어주는 역할.
⑥ "Auto Documentation" 플러그인 실행
- 지정한 컬러스타일을 캔버스에 문서처럼 만들어주는 시스템.

Teartiary로 오타났네 그냥 넘어가장~

 

이렇게 컬러팔레트가 형성되었다!

 

하나 꿀팁은 아무것도 선택하지 않은 배경 누르면 이렇게 뜨는데 저게 초반에는 의도한 순서대로 정렬 안 돼있을 것.

드래그해서 순서를 바꿨다.

---

[컬러 스타일을 만들 때 도움되는 개념 및 방법론]

1. 시맨틱 컬러의 개념과 적용 방법

2. UI 색상의 시각적인 원리

3. UI 디자인 - 색상

 

 

📌폰트스타일

💡폰트스타일
- 디자인 시스템에서 사용할 폰트를 모아둔 목록
- (=스케일) 일정한 규칙에 따라 정렬된 하나의 세트.

 

[폰트스타일 구성]

1) 패밀리 (Family): 폰트의 종류, 폰트 이름

2) 굵기 (Weight): 무게감을 나타냄. 중요한 건 먼저 읽어라!

- 디자이너: Thin, Extralight, Light, Normal, Medium....

- 개발자: 100, 200, 300, 400, 500..

3) 크기 (Size)

- (제목) 20px이상 4px씩 차이나게! (2px은 육안 구분 힘듦)

- (본문) 최소 12px, 일반적으로 16px부터 시작. 10px미만 권장X 

4) 행간 (Line-height): 글자 줄 사이 간격 (정해진 사이즈X) - 레퍼런스 많이 보기

- %, px로 조절 가능

- 글자의 크기와 그 사이 간격을 합친 값.

포토샵에서 예측해서 숫자를 적었는데 이제 계산 가능!

- 가독성에 영향

- 서체마다 행간 확인하기 (폰트마다 여백값이 모두 다르다)

- 일반적인 행간값: (제목, 굵고 큰 폰트) 120~135% / (본문) 135%~170%, 150%이 제일 좋다고 알려짐.

이렇게 해야 좋더라~ 무조건X

🤔왜 150%인지?

150% = 2로 나눈 값을 더한 값 (100 + 100*1/2). => 150%는 2배수로 움직일 수 있다는 뜻

기본 폰트 사이즈가 16px일 때, 2로 나눈 값은 8이기 때문에 행간 값은 폰트 사이즈 16px에 절반인 8px을 더해 24px

규칙 만들기 편하고 계산도 쉬워 150% 많이 사용

5) 자간 (Letter-spacing): 글자와 글자 사이 간격.

 

무난무난 깔끔해서 이 폰트 추천함

 

---

실습: 폰트패밀리 만들기

1. 텍스트 입력
2. 텍스트 사이즈 각 14-16-18 / 복제해서 굵기 두껍게. (총6개)
3. 레이어 이름 변경 (Title/Body)
4. 전체선택 - styler 플러그인 실행

 

5. Auto Documentation 플러그인 실행: 자동으로 컨버스에 폰트스타일 만들어주는 기능.
6. fonts탭 눌러서 이름 지정하고 document all fonts 클릭.

ABC앱 폰트스타일 이라고 적었지만 이와관련한 텍스트는 어디에도 없었다..ㅠ

 

 

 

 

아.. 장난하나 스크린샷 파일이 다 날라갔다

아 장난하니?

이렇게 변했는데 ... 티스토리에서 설정해둔 설정들도 다 날라가서 텍스트만 나열됨.

아......... 다시 청므부터 스크린샷 찍어가며 수정하고 다 끝났을무렵....

똑같은 콘텐츠가 복사되어 파일이 날라갔던것이었다.

아진짜 ㅋㅋㅋ미치겠다

공부한셈치지뭐..ㅠㅠ

---

[폰트 스타일을 만들 때 도움되는 개념 및 방법론]

1) UI 폰트 속성 소개

2) 폰트 스타일에 대한 실무 방법과 개념

3) 머티리얼 디자인 - 폰트

 

---

✍️3주차 숙제

1. Grayscale 만들기
① 이름 변경하기 (Grayscale50~900)
② 우측 패널 Color styles에 떠야한다.

2. Font style 만들기
① 이름변경: Healine, Heading
② 20px, 24px, 28px 로 만들 것
③ 우측 패널 Text styles에 떠야한다.

---

 

🌞햇빛 보고파

눈으로 보는 것보다 직접 해보니까 안헷갈리고 다시 리마인드 돼서 좋았다.

하루종일 피그마만 보니까 가끔은 밖에 나가고싶긴 한데

4개월만 버티자 하는 생각이다..ㅋㅋ

그러면 이제는 회사 출근할 때 햇빛볼 수 있다..

 

 

 

😢 튜터 면담 진행

튜터님 면담을 진행했다.

마음이 계속 불안해서 부트캠프 진행여부에 대해 고민하던 나날들이었다.

주변 사람의 압박때문인지 마음속에서 계속 할 지 말 지 왔다갔다 마음의 갈피를 잡지 못했던 것 같다.

특히 내 상황에 대해 공감을 해주시고 알아주셔서 너무 감사했다.

 

👩‍🏫면담 내용

혼자서도 할 수 있을 것 같다는 생각은 이해한다. 나도 그런 시절이 있었기에 공감하지만 그 때 좀 더 이런 것들을 알고 회사에 입사를 했었다면 우는 날들이 많지 않았을 것이다. 여기서 배우는 내용들이 정말 실무에서 하는 방식을 가져온 것이다.
포폴도 다 만들었다고는 하지만 캠프를 그만뒀을 때 뭐가 문제인지 모를 것이다. 하지만 4개월 후에 다시 포폴을 보면 뭐가 문제고 어떻게 해야할 지 알 수 있을 것이다.

주변에 압박이 있어서 마음이 불안한 것도 이해한다. '나만 늦네' 라는 생각 때문에 빨리 취업해야겠다는 생각을 할 순 있지만
이 캠프에서 배웠던 내용이 추후에 작업시간을 4-5년 단축시킬 수 있을 것이다. 취업을 했다고 쳐도 좋은 상사 밑에서, 체계적으로 배워야 한다. 하지만 그러기가 힘들 수도 있다. 그 과정을 여기서 체계적으로 배운다면 어떤 상사 밑에 들어가도 무슨일을 해야하는 지 스스로 잘 하고 있는지 알 수 있을 것이다.

현재 피그마만 하고 기초를 반복하는 느낌, 그리고 실무경험이 있기 때문에 쉽다고 느낄 수 있다. 하지만 경험을 돌아보면 기초가 정말 중요하다. 3년 경력이 있는 실무자보다 오히려 얼마 안된 신입이 문제 해결력이 좋다고 느낄 때도 있었다.

부트캠프의 가장 큰 장점은 현업에서 뛰고있고, 경력과 능력있는 튜터가 여러분 있다는 것이다. 생각보다 내가 하고싶은 직무의 실무자와 만나기가 생각보다 어려울 것이다. 하지만 여기에선 직접 그 얘기를 들어볼 수도 있고 면담도 할 수 있는게 부트캠프의 가장 큰 장점이라고 생각한다.

여기에 있는 것, 나가는 것 모두 존중한다. 하지만 확실하게 방향을 정했으면 그것에만 집중해라. 만약에 나가는 방향을 선택한다면 그것에 대한 방향성도 제시해주겠다.

 

마냥 붙잡는 방식이 아니라 정말 고민을 들어주시고 그에 맞는 방향성을 정해주신 점에서 마음이 다시 잡힌 것 같다.

'혼자'라는 생각에 빨리 취업해야지라는 마음이 계속 들었는데

진지하게 고민에 조언해주신 튜터님과 '함께'나아감을 느꼈던 면담이었다.

 

사람마다 속도는 다르다고 스스로 다독였는데 그럼에도 주변 사람들이 왜 아직도 취업안하냐고 너 정도면 할수있다고 말하면

내가 생각했던 방향성이 계속 뒤틀려서 고장난 느낌.

근데 튜터분께서 사람마다 속도가 다르다고 말씀하셔서 다시 리마인드하며 방향성을 잡은 것 같다.

그렇지 사람마다 다르지.. 이러면서 ㅋㅋㅋ ㅠㅠ

 

며칠동안 매니저님들 괴롭힌것 같긴하지만.. ^.^ 다시 열심히 해보려한다...!!