크리에이티브 코딩 밋업 인사이트 - 3. 타이포그래피 🅰️
디자인과 관련된 일을 한다면 피할 수 없는 타이포그래피. 원래의 뜻은 '활자 서체의 배열' 이지만, 점차 타이포그래피를 잘 안다 또는 잘 한다라고 표현하듯이 디자인 영역의 한 파트로 자리매김 하고 있다. 나도 타이포그래피에 대해서는 많이 들어왔지만 그 개념에 대해서 구체적으로 살펴본 적은 없었던 것 같다. 디자인을 다시 해보려는 시점에 타이포그래피 개념을 다시 공부하라는 조언을 들었고, '타이포그래피 천일야화' 라는 책을 읽고 있다. 한글 타이포그래피의 교과서 같은 책이랄까.
그러던 중 코딩 밋업 주제로 타이포그래피가 올라왔고, 티켓팅을 하듯 빠르게 신청했다. 참여하러 가보니 확실히 디자이너 분들의 비중이 높았고, 자리도 빠르게 찼다고. 이번 코딩 밋업에서 얻은 타이포그래피 사례들과 인사이트를 정리해본다.
1. 파티클
처음 본 영상은 1999년도 <Text rain>이라는 작품으로, 이 때 이런 인터렉션이 가능했나 신기하게 봤다. 타이포그래피를 파티클로 표현하는 사례의 첫번째 였는데, 최근 활동을 활발히 하는 작가들의 사례도 함께 보여주셨다.
André Burnier @burnier
John Burgess @burgess_john
Pauric Freeman @pauric_freeman
이런 작업들은 아이디어를 내기도 쉽지 않거니와 코딩을 해야해서 디자인 - 개발 머리가 같이 있어야한다는 점이 어려운 것 같다. 이런 작업들을 보다 쉽게 할 수 있도록 여러 라이브러리가 만들어지고 있는데 그중 신박한 물리엔진 라이브러리가 있었다.
Matter.js
링크에 접속하면 다양한 사례를 확인할 수 있다. 깃에 튜토리얼과 가이드도 친절히 정리되어 있는데, 이정도 활용이 가능하게 되면 위에서 본 사례처럼 물리적인 타이포 작업이 가능해진다. 하지만 난 아직 잘 모르겠..
Matter.js
Matter.js is 2D rigid body physics engine for the web, using JavaScript and HTML5
brm.io
2. ASCII
ASCII(American Standard Code for Information Interchange)는 문자를 표현하는 표준 코드 체계로 아스키라고 읽는다. 문자를 표현하기 위한 코드 체계이지만 이 체계를 활용하여 그래픽을 구현하는 사례가 있다.
Andreas Gysin @andreasgysin
이 분의 홈페이지에 들어가면 흥미로운 토이 프로젝트들도 볼 수 있다.
ertdfgcvb
ertdfgcvb.xyz
p5js로 아스키 인터렉션 만들기
p5js를 이용해 웹캠 인터렉션 아스키 그래픽을 만들 수 있다. p5js를 이용하여 비디오의 밝은 부분과 어두운 부분을 순차적으로 나누고, 거기에 대응하는 문자열을 넣으면 된다. 나는 아래처럼 ⚫️ 에 색을 다르게 입혀서 실시간으로 랜더링 되는 인터렉션을 만들어봤다.
3. 모듈러 / 타일
위의 두가지는 타이포가 그래픽의 요소가 되었다면, 모듈을 이용하여 타이포 작업을 하는 사례도 있었다. 타이포를 완성하기 위해서 모듈러를 개발하거나, 영상을 활용하는 사례들이 인상깊었다.
Julian Hespenheide 줄리안 헤스펜하이데 @julian_hespenheide
문자열을 모듈로 타이포를 완성하는 사례
Amuki Estudio 아무키 에스튜디오 @amuki.ec
그래픽 모듈을 만들고 조합해서 타이포를 완성시키는 사례
모듈을 생성하는 모듈러를 만들거나, AI를 이용해 그래픽을 만들기도 한다.
Amuki Estudio
www.behance.net
Eduard Krasilnikov 에두아르드 크라실니코프 @ed.creativecoder
꽃의 피고 지는 영상을 모듈로 타이포를 구현한 사례
3. 아웃라인 / 패스
아웃라인과 패스를 변형하여 타이포를 완성시키는 사례, 타이포의 라인을 만들기 위한 다양한 방법들이 재미있었다.
Antonin Waterkeyn @antonin.work
파티클을 활용하여 타이포 아웃라인을 만든 사례
mikevdsanden @mikevdsanden
아웃라인 베지어곡선을 변형하여 타이포를 만든 사례
Zachary Lieberman 재커리 리버만 @zach.lieberman
자동차를 타이포에 맞춰 움직여 타이포를 다시 만든 사례
4. 가변 글꼴
Variable Type Show (Main) 배리어블 타입 쇼/ 2019 Typojanchi 타이포잔치
Scope
Scope is a monolinear typeface designed with typographic interaction in mind.
scope-typeface.com
김종민 @cmiscm
Jongmin Kim Blog
Interactive developer & designer Jongmin Kim's blog.
blog.cmiscm.com
Leon Sans
Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.
leon-kim.com
Mario De Meyer @mariodemeyer
F37 Makadam
F37® Foundry is an award-winning type foundry that creates fonts and logotypes to help businesses stand apart.
f37foundry.com
Studio Feixen @studiofeixen
Studio Feixen Fonts
Medium HELEN: This is your greatest moment? A game? JERRY: Well, no. Sharon Besser, of course. MORTY: You know what my greatest moment was, don't you? 1946. I went to work for Harry Flemming and I came up with the idea for the beltless trench coat. HELEN:
fonts.studiofeixen.ch
5. 도구
kiel danger mutschelknaus @kiel.d.m
https://spacetypegenerator.com/
SPACE TYPE GENERATOR
a kinetic type generator from kielm Buy me a coffee to help support STG ReadMe
spacetypegenerator.com
Schultzschultz @schultzschultzgrafik
DIA Studio @dia_studio
DIA — DIA
DIA is a branding and graphic design studio specializing in kinetic identities and typographic systems. Headquartered in NYC and Chamonix, France, we’ve developed a new approach to designing identity systems where motion is foundational and creative tool
dia.tv
DIA — DIA
DIA is a branding and graphic design studio specializing in kinetic identities and typographic systems. Headquartered in NYC and Chamonix, France, we’ve developed a new approach to designing identity systems where motion is foundational and creative tool
dia.tv
6. 기타
나만의 한글 조각을 만들어보세요
네이버 한글날 - 스페셜로고
나만의 한글 조각을 만들어 보세요!
logoproject.naver.com
프로젝트 한글
Project Hangeul #1 - The mimetic words of Hangeul
The Mimetic Words of Hangeul is an art project that attempts to visually represent onomatopoeic and mimetic words according to their meaning.
mimetic.cmiscm.com
Google fonts + 한국어
Google Fonts + 한국어 • Google Fonts + Korean
googlefonts.github.io
Types of Type
Types of Type
A Guide to Typography with Character.
typesoftype.com
Font map
IDEO builds interactive font map using artificial intelligence
with font map, designers at IDEO are bringing artificial intelligence to the world of typography.
www.designboom.com
'PM노트 ✏️' 카테고리의 다른 글
| 혼자 워드프레스 홈페이지 만들기 도전 💪 (0) | 2024.07.03 |
|---|---|
| 크리에이티브 코딩 밋업 인사이트 - 4. Transition 🎞️ (0) | 2024.07.03 |
| 크리에이티브 코딩 밋업 인사이트 - 2. 식물 🪴 (0) | 2024.06.05 |
| 크리에이티브 코딩 밋업 인사이트 - 1. MAP 🗺️ (0) | 2024.05.22 |
| 디자이너 출신 PM이 퍼블리싱(html, CSS)을 배우면 할 수 있게 되는 것들 (0) | 2024.03.18 |
