(DAY2) 타이포그래피

 

 

안녕하세요 :)

오늘은 타이포그래피의 디자인 기초를 공부하고 실습하는 시간을 가졌습니다.

저는 첫날 수업과 비교했을 때 실습시간이 길어서 좋았습니다. 재밌었어요 !

 

---

 

 

✏️오늘의 학습

• 타이포그래피 특징 알기
• 실습을 통해 타이포의 계층구조 이해하기
  • 실습1) 원하는 키워드로 컬러팔레트 뽑아보기
  • 실습2) 마켓컬리 제품상세페이지 피그마로 클론 해보기 (텍스트 위주로)
  • 실습3) 챗GPT를 활용한 퍼스널브랜딩 글귀 페이지 만들어보기 (텍스트 계층구조 활용)

 

 

 

 

📖오늘의 핵심

처음에 이론은 chill하고 편하게 들으세요.
끝까지 가는 사람이 이기는 겁니다.

머리로 아는 것과 손으로 아는 것은 또 다르다. →  손으로 익히는 게 중요합니다.

 

 

 

 

 

📝수업 내용 메모장

 

타이포그래피
세리프 → 명조체 ex) Times New Roman
산세리프 → 고딕체 ex) Helvetica

 

자간 → Letter Spacing

행간 → Line Height

용어는 기본으로 알고 가자.

 

타이포그래피의 두분야
기능적 타이포그래피 : 정보전달 최우선으로 함 →  프로덕트디자인에서는 기능적으로 쓰이는 경우가 많은 것 같음
살험적 타이포그래피 : 미적기능 →  주로 광고, 브랜딩 등에 사용함

 

 

https://www.khroma.co/generator

Khroma - The AI color tool for designers

색상 50개 선택하면, 선택한 색상들을 조합한 예시를 보여주는 툴

 

 

 

---

 

 

 

 

💪🏻실습 해보기

실습1) 이미지에서 컬러 추출하기

 

어도비 사이트를 활용하여 이미지에서 컬러팔레트를 추출할 수 있다.

https://color.adobe.com/ko/create/image

 

 

 

내가 잡은 키워드 : 청춘

출처 : 핀터레스트

 

 

'청춘' 단어에 들어있는 푸르른 이미지와 과거를 회상하는 은은한 불꽃의 느낌이 좋아서 위의 이미지를 선택했다.

이미지에서 추출한 컬러팔레트를 보면 중채도의 은근하게 묵직한 느낌의 색상이 아련하게 과거를 회상하는 감성을 담은 것 같다.

 

 

 

 

 

 

 

 

 

 

 

 

 

실습2) 마켓컬리 제품상세페이지 피그마로 클론 해보기

 

 

(실습 결과물)

 

 

눈에 보이는 타이포를 최대한 똑같이 작업해봤다. (폰트는 Pretendard로 통일했다.)

사용자 입장에서 가장 중요한 정보 [제품 이름], [가격]이 가장 처음에 눈에 들어올 수 있도록 폰트 크기가 가장 컸다.

 

"[KF365] 대추방울토마토 750g" → 28pt, SemiBold

"8,000"  → 28pt, Bold

 

폰트 크기는 같아도 폰트의 굵기에 미세한 차이가 있었다. 자간은 Auto로 건들지 않았다.

세부 내용의 자간(Letter spacing)은 -4%로 되어 있었다.

세부 내용 안에서도 가장 마지막줄("소비기한~")의 자간 (Letter spacing)은 -3.3%로 되어 있었는데,

 

💡같은 종류의 정보 안에서도 자간 정보를 미세하게 조절하기도 한다는 것을 알게 되었다.

     내가 생각했던 범주보다 더 세밀하게 작업하는구나? 하는 느낌이었다.

 

 

나는 그동안 헛디자이너(?)였나보다.

 

그냥 눈으로 보는 것보다 직접 손으로 만들어보는게 더 많은 것을 얻는 것 같다.

 

 

 

 

 

 

 

 

 

 

 

 

실습3) 챗GPT를 활용한 퍼스널브랜딩 글귀 페이지 만들어보기

 

 

(실습 결과물)

 

 

 

글귀 키워드 : 청춘, 하이틴, 밴드, 바다, 여름

 

내가 좋아하는 키워드를 바탕으로 챗GPT에게 명령하여 글귀 재료를 뽑아냈다.

편집디자인 레이아웃을 검색해서 레퍼런스 이미지를 찾고, 최대한 참고하여 디자인했다.

 

자간, 행간, 여백을 활용하여 청춘을 회상하는 아련한 느낌을 주고 싶었다.

이 작업을 하기에 앞서, 마켓컬리 페이지 클론을 한게 많은 도움이 됐다.

💡타이포는 화면 안에 디자인 재료로 쓰일 수 있다는 것과, 같은 정보여도 자간, 행간, 색상, 폰트 크기 등을 활용하여 다른 느낌을 줄 수 있다는 것을 배웠다.

 

잘했다고 칭찬 받았당 히히

평소에 편집디자인에 약하다고 생각했었는데 칭찬 받아서 굉장히 뿌듯했다.

개인적으로 에이핫의 [디자인 구구단] 책이 내게 많은 도움이 되었다.

 

 

→ 이 책인데, 기본적인 디자인 공식을 만화의 형식으로 풀어낸 책이다.

→ 디자인 기본기가 부족한 내가 부끄러워서 몰래 사서 읽었다.

→ 그동안 머리로 알고 있다고 생각했던 요소들을 다시 손으로 디테일하게 짚어볼 수 있도록 도와줬다.

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

💡느낀점

 

오늘 실습을 하면서 솔직히 툴을 처음 써보는 게 아니었기에 다 안다고 생각했었는데, 자만하지 말고 그 순간을 집중해서 작업하려고 노력했다. 멘토님 말대로 머리를 비우고 손을 움직였더니 모르고 있었던 감각적인 무언가를 느낀 것 같다.

(말로 설명하기엔 어려운 느낌. 정말 말 그대로 '감각적인 느낌' 그 감정을 오늘 배웠다.)

 

스스로 통제할 수 없는 것에 나를 프레임 씌우지 말기.

내가 할 수 있는 것에 집중해라.

 

라는 말을 해주셨는데 현재의 내게 필요한 말이었고, 그 말을 믿고 따르기로 했다.

그동안 나는 나를 너무 틀에 가둬놨던 것 같다.

 

앞으로 내게 주어질 과제들, 업무들, 과업들에 자만하지 말고 그 순간의 감각을 집중해서 작업하는 태도를 길러야겠다는 다짐을 했다. 💪🏻💪🏻💪🏻