티스토리 뷰

반응형


PPT 로 보기 

  • https://www.slideshare.net/jasonhong56/gumguard-ppt-90004378

  • PPT 는 슬라이드 쉐어에서도 볼 수 있습니다.


LAYOUT 

  • 지난 시간에 Typography 에 대해서 살펴보았는데요, 이번엔 Layout 에 대해 살펴보겠습니다. 못보신 분은 여기 를 클릭해서 보실 수 있습니다.


  • Layout 은 근접성, 정렬, 위계 이 세가지만 신경쓰시면 됩니다. 위계는 Typography 에서 살펴본 것처럼 시선의 길을 만드는 작업입니다.

  • 근접성이라는 것은 비슷한 것들끼리 묶어주는 것을 의미합니다. 김밥천국 메뉴를 예시로 들면서 메뉴판을 한 번 만들어볼까요?

  • 답답함 을 구현한 메뉴판입니다. 뭐가 뭔지도 잘 모르겠고 심지어 가격과 메뉴가 매칭되지 않는 현상이 나타납니다.

  • 타이틀 / 분식류 / 식사류 / 찌개류 / 김밥류 - 이상 5가지로 구분지어서 간격을 만들어 주었습니다. 변화가 눈에 보이시나요? 단순히 간격만 조금 만들어 주었는데 벌써 이렇게 개선되는 효과가 나타납니다.

  • 이번엔 정렬을 한 번 해보겠습니다. 우리가 항상하고 있지만 생각하지 못하고 있는 요소입니다. 글을 작성할 때도 기본적으로 좌측정렬이 되어있다는 것을 인지하지 못하고 있는것 처럼 말이죠.

  • Layout 에서의 정렬은 객체간 정렬 뿐 아니라 화면 전체의 정렬 또한 의미합니다. 연재 메뉴 전체가 좌측부분에 위치한 상태입니다.

  • 일단 슬라이드의 중심으로 옮겨줍니다.

  • 항상 중심에 콘텐츠가 위치할 필요는 없습니다만 딱히 의도하는 바가 없다면 중심에 두는 것이 가장 안전합니다.

  • 메뉴에 위계를 구성합니다. 타이틀(김밥천국 메뉴) 와 분류를 일반 글자보다 더 크게 만들어 줍니다.

  • 그리고 메뉴와 가격 사이에 간격을 만들어 가독성을 높여줍니다.

  • 메뉴들을 균등분할하여 통일성을 부여하고

  • 행간을 1.3 으로 늘려 가독성을 더욱 증가시킵니다.

  • 마지막으로 선 한 두개만 그어 준다면?


  • 같은 컨텐츠인데... 심지어 폰트도 같은데...

  • 위계, 정렬 만 해주어도 완전 새로운 슬라이드로 변화시킬 수 있습니다.


예제 마무리 

  • 예제 슬라이드를 마무리 지어볼까요?


  • 복잡한 슬라이드의 경우 여러개의 슬라이드로 분할하는 작업이 필요합니다. 큰 의미에서 근접성이라고 할 수 있겠지요. 

  • 원래 1장의 슬라이드를 4개의 슬라이드로 분할하였고 애니메이션 작업만 살짝 해주면 깔끔한 발표 슬라이드를 만들어낼 수 있습니다.


  • 질문이나 제작문의는 메일 혹은 댓글로 요청해주시면 감사하겠습니다.






부족한 블로그에 방문해 주셔서 감사합니다.

잘못된 부분이나 질문이 있으시면 

댓글로 말씀해주세요.


금방 확인하고 피드백 드리겠습니다.


좋은 하루 되세요. ^^


반응형
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함