2016에 참여한 <코드+글자꼴>워크샵 발표자료 입니다.

1. 코드 + 글자꼴 워크샵
과정 및 실험들
stuckyi studio
김태경 / 정유미

2. 1
참여동기

3. “이 워크숍을 통해 참여자는
글자꼴이 내포해야 할 기술의
가능성은 무엇일지, 새로운 매체
환경은 글자에 어떤 가능성을
부여할 수 있을지를 연구하고,
실험한다.”

4. 2
워크샵에 참여했던
진행했던 작업들

5. 총 8주간 했던 것들

6. 간추려서
3가지의 큰 분류로
설명드리고자 합니다.

7. 코드, 글자꼴 리서치 / 공부
코드로 레터링 작업
코드로 폰트 작업

8. 코드, 글자꼴 리서치 / 공부
코드로 레터링 작업
코드로 폰트 작업

9. 어떤 의미를 지닌 작업을 할까?
컴퓨테이션 디자인, 폰트 관한
담론, 사례 조사하고,
나름대로 분류하는 작업을 통해
우리가 어떤 것을 하고 싶은지
구체화

12. 코드, 글자꼴 리서치 / 공부
코드로 레터링 작업
코드로 폰트 작업

14. 코드, 글자꼴 리서치 / 공부
코드로 레터링 작업
코드로 폰트 작업

16. 웹폰트, 디지털 폰트와는
구분된 이름이 필요한데?

17. 용어정의를 해봤습니다.
CODED = 코드체계로 표현된

18. 용어정의를 해봤습니다.
CODED 레터링 = 코드체계로 표현된 레터링
CODED 폰트 = 코드체계로 표현된 폰트
CODED = 코드체계로 표현된

19. 용어정의를 해봤습니다.
- 최초제작자는 일련의 규칙을 포함하여 배포한다.
- 사용 단계에서 글자꼴 형태 변형 가능
- 인터랙션
- 애니메이션 등
- 2차 응용 제작 가능
- 최초 제작자의 코드에 새로운 규칙 추가 가능
CODED 레터링 = 코드체계로 표현된 레터링
CODED 폰트 = 코드체계로 표현된 폰트
CODED = 코드체계로 표현된

20. 코드로 폰트를
구현하는 것의 의미 ?

21. 코딩으로 만든 레터링
코딩으로 만든 폰트

22. 코딩으로만든
폰트
- 2차 생산가능
- 심미성, 창의성 중심
- 필요한 문자만 구현
- 2차 생산가능
- 사용성 중심
- 모든 글자구현
레터링

24. 기존 웹 폰트
코딩으로 만든 폰트

25. - 모든 글자 구현
- 완성된 형태로 배포
- 2차 생산 불가
기존
웹폰트 Coded 폰트
- 모든 글자구현
- 응용 가능형태로 배포
- 2차 생산 가능
코딩으로 만든

26. 기존 웹폰트
코등으로만든 레터링
코딩으로 만든 폰트
= 제작하는 의미, 목적이 다르다
/ 다르게 접근해야 한다.

27. 위의 생각들은 7,8월에 삽질을
통해서 정리해본지 얼마 안됐고,
실험들은 별개 주르ㄹ.ㄹㅡ.ㄹ.ㄱ..

28. 코딩으로 폰트 만들기
관련하여 했던 시도들

29. 코딩으로 폰트 만들기
관련하여 했던 시도들
1. 완성형 폰트
2. 조합형 폰트
3. 폰트화 작업

30. 1. 완성형 폰트로 작업하기

31. 제작흐름
- 상황1 : 필수적으로 2,350자를 제작해야 함.
- 상황2 : 워크샵의 방향은 인터랙션 & 애니메이션

32. 제작흐름
- 상황1 : 필수적으로 2,350자를 제작해야 함.
- 상황2 : 워크샵의 방향은 인터랙션 & 애니메이션
- 김태경 개발자의 딴지 걸기

33. 의문점
인터랙션 구현이 목적이라면,
이미 잘 정리된 폰트의
형태 정보를 활용하는 게
좋지 않을까?

35. 기존폰트의 정보얻기

36. 기존폰트의 정보얻기
얻을 수 있는 것
- 이름
- 유니코드
- 인덱스
- xMin, xMax, yMin, yMax
- 외곽선

37. 기존폰트의 정보얻기
얻을 수 있는 것
- 이름
- 유니코드
- 인덱스
- xMin, xMax, yMin, yMax
- 외곽선
외곽선의 위치값을 컴퓨터에게 알려주고,
각 위치값에 대한 왜곡, 변형을 주자는 것

39. 한계
컴퓨터는
자음과 모음을 비롯한 모든 것을
구분하지 못한다.
= 세부적인 컨트롤을 할 수 없다.

40. 2. 조합형 폰트로 작업하기

41. 조합형 폰트
각 자소를 독립적인 요소로 놓고,
각각의 형태나 움직임 등 효과를
적용해볼 수 있다.

42. 조합형 폰트
각 자소를 독립적인 요소로 놓고,
각각의 형태나 움직임 등 효과를
적용해볼 수 있다.
= 실험해보기 적합하다고 판단.

43. 조합형 폰트로 하고싶은 것
- 자소 단위의 컨트롤
- 각 자소는 우리가 정의한
규칙에 의해 동작한다.

44. (오래전 기획 하나를 꺼냄)뭔가 이런느낌?

46. 어디 자소에 영향을
줘볼 친구없나?
- 마우스위치, 시간의 흐름,
임의의 값 …

47. 자소에 영향을 줄 친구없나?
[선택] 자소의 변화에 (몇일전에 발견한)
스마트폰의 센서값을 써보자
- 마우스위치, 시간의 흐름,
임의의 값 …

50. 규칙 1
- 사용 센서 값 : gamma
- 변경 될 것 정하기 :
- 자음 : 형태변경(X), 위치 이동 (O)
- 모음 : 형태변형(O), 위치 이동 (0)
: 자소 변형에 영향을 줄 첫 번째 규칙

53. 기본점

54. 변형점
: 자음의 위치 변경에
따른 인터랙션을
쉽게, 잘 보여주기
위해 세로획의
길이가 길다.

56. - 사용 센서 값 : beta
- 변경 될 것 정하기 :
- 글자 간 간격 : 자간과 행간을 동시에 변경
: 추가적으로, 글자간 간격 변화
규칙 2

59. 3. 폰트화 작업

60. 폰트 생성 작업
- 사용 정보 : 사용자가 입력창에 입력한 문자
- 구현 형태 :
- 사용자가 입력한 형태를 페이지 이동없이 입력창 하단에 구현
- 변경되는 디바이스 의 센서값을 글자 형태및 위치를 변경하는데 사용.
: 모바일에서 사용자가 사용해 볼 수 있는 환경

62. 한계
- 사용자에 대한 고려가 아직 이루어지지 않은 단계이다.
- 틸트되는 형태에 대한 움직임 구현 알고리즘이
일차원적이다.
- 자소에 대한 변형 실험은 아직 하지 못했다.

63. 고민이 되는 부분
사람 : “오오… 신기한 글자형태!!”
웹브라우저: “그건 그냥 canvas”
현재는 그냥 ‘그림’일 뿐임.

64. 고민이 되는 부분
현재는 그냥 ‘그림’일 뿐임.
사람 : “오오… 신기한 글자형태!!”
웹브라우저: “그건 그냥 canvas”
= ‘디지털 환경에 맞는’ 이라는 의미에 부합하지
않는다. (브라우저를 속이는 얕은 수)

65. coded font를 활용하여
다양한 관점에서 이것의 유용성에
대해 실험해볼 필요가있다고
생각합니다.
그럼에도 불구하고

66. 감사합니다.