SlideShare a Scribd company logo
1 of 129
Download to read offline
디자인,쉽게 알기
   Typeface
  Typography
     Grid



    UXD 박지환
이 빈 부분 좀
이것도 추가해 주세요.          채워주세요.
벨런스가 깨져요.             답답해 보여요.


  폰트 좀 키워주세요.
                   전체적으로 건드려야 해서..
여기 2픽셀만 왼쪽으로....
티도 안 나는데
어디가 삐뚤어졌다고.        좀 더 튀는 폰트로..
                   컨셉과 안 맞아요.
텍스트 크기/위치
 공간의 활용
 정보의 그룹핑
디자이너
TEXT
Typeface
Typography
   Grid
Typeface
Typography
   Grid
TYPE FACE
  타입페이스
TYPE + FACE
 글꼴, 서체, 폰트
브랜드 서체
아이덴티티
본문용 서체
정보전달,가독성
좋은 서체의 선택
목적에 맞은 서체
여우비




     cre 쿨째즈

봄날
윤명조




       윤명조




나눔명조
RIX정고딕
폰트클럽                         윤디자인
http://www.fontclub.co.kr   http://www.yoondesign.com
TYPOGRAPHY
  타이포그래피
활판 인쇄술, 판짜기 방법
글자꼴의 디자인, 레터링,
편집 디자인, 가독성 등을
모두 포괄하는
총체적인 조형적 활동
글자를 활용한
총체적인 조형 활동
실험적
기능적
자간, 행간, 정렬
  글줄의 길이
크기, 굵기, 기울기
밑줄, 컬러, 그리드
A
B

    C
A
B

    C
크기
굵기
대비
크기
굵기
대비
자간
행간
조절
단




4단   6단
3단   그리드

홀수   긴장


짝수   안정
시선
흐름
크기
굵기
대비
컬러
여백
대비
그래픽
컨셉
그래픽
디테일
행간/자간
 가독성
서체의 수
 통일성
1
3
4
5
GRID
그리드
정보에
질서와 구조
 부여한다.
통상적
그리드 비율
황금비율
삼등분의 원칙
1.618 : 1   1.666 : 1
웹
그리드
960
Grid system
1.618   1
1140
Grid system
1140~769px   768px
Pudding.to
PLAYY
NAVER
HYUNDAI
Multi-Device Layout Patterns
Design of
Everyday Life
감사합니다.


 konghak@gmail.com

More Related Content

More from KTH, 케이티하이텔

[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221KTH, 케이티하이텔
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주KTH, 케이티하이텔
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기KTH, 케이티하이텔
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈KTH, 케이티하이텔
 
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기KTH, 케이티하이텔
 
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기KTH, 케이티하이텔
 
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for AppspressoKTH, 케이티하이텔
 
[H3 2012] 스마트모바일 환경에서의 App.품질관리전략
[H3 2012] 스마트모바일 환경에서의 App.품질관리전략[H3 2012] 스마트모바일 환경에서의 App.품질관리전략
[H3 2012] 스마트모바일 환경에서의 App.품질관리전략KTH, 케이티하이텔
 
[H3 2012] 스타트업 개발사의 생존필수 아이템, BaaS 모바일 고객센터
[H3 2012] 스타트업 개발사의 생존필수 아이템, BaaS 모바일 고객센터[H3 2012] 스타트업 개발사의 생존필수 아이템, BaaS 모바일 고객센터
[H3 2012] 스타트업 개발사의 생존필수 아이템, BaaS 모바일 고객센터KTH, 케이티하이텔
 
[H3 2012] Local based SNS를 이용한 타겟 마케팅
[H3 2012] Local based SNS를 이용한 타겟 마케팅[H3 2012] Local based SNS를 이용한 타겟 마케팅
[H3 2012] Local based SNS를 이용한 타겟 마케팅KTH, 케이티하이텔
 
[H3 2012] 오픈소스로 개발 실력 쌓기
[H3 2012] 오픈소스로 개발 실력 쌓기[H3 2012] 오픈소스로 개발 실력 쌓기
[H3 2012] 오픈소스로 개발 실력 쌓기KTH, 케이티하이텔
 
[H3 2012] 앱(APP) 중심으로 생각하기 - DevOps와 자동화
[H3 2012] 앱(APP) 중심으로 생각하기 - DevOps와 자동화[H3 2012] 앱(APP) 중심으로 생각하기 - DevOps와 자동화
[H3 2012] 앱(APP) 중심으로 생각하기 - DevOps와 자동화KTH, 케이티하이텔
 
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0KTH, 케이티하이텔
 
[H3 2012] Cloud Database Service - Hulahoop를 소개합니다.
[H3 2012] Cloud Database Service - Hulahoop를 소개합니다.[H3 2012] Cloud Database Service - Hulahoop를 소개합니다.
[H3 2012] Cloud Database Service - Hulahoop를 소개합니다.KTH, 케이티하이텔
 
[H3 2012] 기획/디자인/개발자 모두 알아야 하는 '대박앱의 비밀'
[H3 2012] 기획/디자인/개발자 모두 알아야 하는 '대박앱의 비밀'[H3 2012] 기획/디자인/개발자 모두 알아야 하는 '대박앱의 비밀'
[H3 2012] 기획/디자인/개발자 모두 알아야 하는 '대박앱의 비밀'KTH, 케이티하이텔
 
[H3 2012] OAuth2 - API 인증을위한 만능 도구상자
[H3 2012] OAuth2 - API 인증을위한 만능 도구상자[H3 2012] OAuth2 - API 인증을위한 만능 도구상자
[H3 2012] OAuth2 - API 인증을위한 만능 도구상자KTH, 케이티하이텔
 
[H3 2012] 오픈 소스로 구현하는 실시간 데이터 처리를 위한 CEP
[H3 2012] 오픈 소스로 구현하는 실시간 데이터 처리를 위한 CEP[H3 2012] 오픈 소스로 구현하는 실시간 데이터 처리를 위한 CEP
[H3 2012] 오픈 소스로 구현하는 실시간 데이터 처리를 위한 CEPKTH, 케이티하이텔
 
[H3 2012] 로그속 사용자 발자국 들여다보기
[H3 2012] 로그속 사용자 발자국 들여다보기[H3 2012] 로그속 사용자 발자국 들여다보기
[H3 2012] 로그속 사용자 발자국 들여다보기KTH, 케이티하이텔
 

More from KTH, 케이티하이텔 (20)

[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
 
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
 
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
[H3 2012] Open API 와 Ruby on Rails 에 대한 이야기
 
[H3 2012] UX, 애자일하고 싶어요
[H3 2012] UX, 애자일하고 싶어요[H3 2012] UX, 애자일하고 싶어요
[H3 2012] UX, 애자일하고 싶어요
 
[H3 2012] Instant Prototyping with ROR
[H3 2012] Instant Prototyping with ROR[H3 2012] Instant Prototyping with ROR
[H3 2012] Instant Prototyping with ROR
 
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
 
[H3 2012] 스마트모바일 환경에서의 App.품질관리전략
[H3 2012] 스마트모바일 환경에서의 App.품질관리전략[H3 2012] 스마트모바일 환경에서의 App.품질관리전략
[H3 2012] 스마트모바일 환경에서의 App.품질관리전략
 
[H3 2012] 스타트업 개발사의 생존필수 아이템, BaaS 모바일 고객센터
[H3 2012] 스타트업 개발사의 생존필수 아이템, BaaS 모바일 고객센터[H3 2012] 스타트업 개발사의 생존필수 아이템, BaaS 모바일 고객센터
[H3 2012] 스타트업 개발사의 생존필수 아이템, BaaS 모바일 고객센터
 
[H3 2012] Local based SNS를 이용한 타겟 마케팅
[H3 2012] Local based SNS를 이용한 타겟 마케팅[H3 2012] Local based SNS를 이용한 타겟 마케팅
[H3 2012] Local based SNS를 이용한 타겟 마케팅
 
[H3 2012] 오픈소스로 개발 실력 쌓기
[H3 2012] 오픈소스로 개발 실력 쌓기[H3 2012] 오픈소스로 개발 실력 쌓기
[H3 2012] 오픈소스로 개발 실력 쌓기
 
[H3 2012] 앱(APP) 중심으로 생각하기 - DevOps와 자동화
[H3 2012] 앱(APP) 중심으로 생각하기 - DevOps와 자동화[H3 2012] 앱(APP) 중심으로 생각하기 - DevOps와 자동화
[H3 2012] 앱(APP) 중심으로 생각하기 - DevOps와 자동화
 
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
[H3 2012] 하이브리드앱 제작 사례 공유 - 푸딩얼굴인식 3.0
 
[H3 2012] Cloud Database Service - Hulahoop를 소개합니다.
[H3 2012] Cloud Database Service - Hulahoop를 소개합니다.[H3 2012] Cloud Database Service - Hulahoop를 소개합니다.
[H3 2012] Cloud Database Service - Hulahoop를 소개합니다.
 
[H3 2012] 기획/디자인/개발자 모두 알아야 하는 '대박앱의 비밀'
[H3 2012] 기획/디자인/개발자 모두 알아야 하는 '대박앱의 비밀'[H3 2012] 기획/디자인/개발자 모두 알아야 하는 '대박앱의 비밀'
[H3 2012] 기획/디자인/개발자 모두 알아야 하는 '대박앱의 비밀'
 
[H3 2012] OAuth2 - API 인증을위한 만능 도구상자
[H3 2012] OAuth2 - API 인증을위한 만능 도구상자[H3 2012] OAuth2 - API 인증을위한 만능 도구상자
[H3 2012] OAuth2 - API 인증을위한 만능 도구상자
 
[H3 2012] 오픈 소스로 구현하는 실시간 데이터 처리를 위한 CEP
[H3 2012] 오픈 소스로 구현하는 실시간 데이터 처리를 위한 CEP[H3 2012] 오픈 소스로 구현하는 실시간 데이터 처리를 위한 CEP
[H3 2012] 오픈 소스로 구현하는 실시간 데이터 처리를 위한 CEP
 
[H3 2012] 로그속 사용자 발자국 들여다보기
[H3 2012] 로그속 사용자 발자국 들여다보기[H3 2012] 로그속 사용자 발자국 들여다보기
[H3 2012] 로그속 사용자 발자국 들여다보기
 

Recently uploaded

캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차캐드앤그래픽스
 
MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution DetectionMOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution DetectionKim Daeun
 
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Wonjun Hwang
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Wonjun Hwang
 
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...Kim Daeun
 
A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)Tae Young Lee
 

Recently uploaded (6)

캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차
 
MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution DetectionMOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
 
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
 
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
 
A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)
 

KTH_Detail day_안드로메다에서 온 디자이너이야기_3차_디자인기본요소_박지환