Digital Text Book | CREDIT 포트폴리오

DIGITAL
TEXT BOOK_

CLIENT:
CMASS IT
SERVICE:
DIGITAL TEXT BOOK
CATEGORY:
- DESIGN
EXECUTION:
2024.04
PROJECT:
디지털 교과서 레이아웃 제작

This project focused on establishing a standardized layout system optimized for delivering educational content in a digital environment. We defined key structural components such as overall content height, header configuration, and grid foundations, while refining detailed elements including spacing rules, typographic hierarchy, and modal content areas. As a result, we built a cohesive and reliable UI structure that ensures consistent presentation across various devices and content types. The finalized layout system also provides a scalable foundation adaptable to future subjects and expanding digital learning materials.

교과서를 디지털 환경에 적합한 형태로 전환하기 위해 표준화된 공통 레이아웃 시스템을 구축하는 것을 목표로 진행되었습니다. 전체 콘텐츠 영역 높이, 헤더 구조, 그리드 시스템을 설정하고 제목·본문 간격, 폰트 계층, 모달 영역 등 세부 요소까지 정교하게 설계했습니다. 이를 통해 다양한 학습 콘텐츠가 디바이스에 상관없이 안정적으로 표현될 수 있는 일관된 디지털 교과서 UI 구조를 완성했습니다. 또한 체계적인 레이아웃 기준을 마련함으로써 향후 다양한 과목 콘텐츠에도 확장 가능한 기반을 구축했습니다.

Digital Text Book

OVERVIEW

디지털 교과서의 최상위 구조인 전체 콘텐츠 영역의 기준을 수립했습니다. 전체 높이는 800px, 상단 헤더는 60px, 내부 콘텐츠 영역은 740px로 구분해 정보의 위계를 명확히 했습니다. 콘텐츠 영역 너비는 모달 콘텐츠 배치를 고려하여 840px로 설정해 다양한 보조 정보가 함께 제공될 때도 안정적인 레이아웃을 유지하도록 했습니다. 마진은 64px, 거터는 20px로 4의 배수 체계를 적용하고, 아이콘·소단원 제목·본문 등 각 요소의 영역 크기와 간격을 정교하게 설계해 가독성과 균형감을 높였습니다.

Layout Guide 1 ®Credit

Layout Guide 2 ®Credit

Layout Guide 3 ®Credit

TONE &
MANNER

디지털 교과서 레이아웃은 흰색 배경과 블랙 텍스트를 기본 톤으로 설정했습니다. 이는 다양한 이미지, 일러스트, 그래픽 요소가 콘텐츠 전반에 활용될 가능성을 고려하여, 어떠한 시각 요소와도 충돌하지 않는 가장 안정적이고 가독성이 높은 조합을 선택하였습니다. 상단 헤더는 청록색을 적용해 콘텐츠 영역과 명확한 구분을 주면서도 교육용 디지털 매체에 적합한 차분하고 신뢰감 있는 분위기를 전달하도록 디자인했습니다. 전체적으로 심플하고 명료한 톤앤매너를 통해 사용자는 학습 콘텐츠에 집중할 수 있고, 다양한 디지털 자료가 삽입되더라도 균형감 있게 표현되는 환경을 제공합니다.

White

4PT
GRID SYSEM

전체 구조 안에서 콘텐츠 간 간격, 박스형 콘텐츠의 내부 여백, 콘텐츠 크기 규칙 등 모든 세부 요소를 4의 배수 체계로 설정했습니다. UX/UI 디자인에서는 일반적으로 8px 그리드를 활용하지만, 이는 교과서처럼 텍스트 밀도가 높은 콘텐츠에서는 간격이 지나치게 좁거나 넓어져 가독성을 떨어뜨릴 수 있습니다. 이에 따라 본 프로젝트에서는 더 유연하고 안정적인 간격 설계를 위해 4px 단위 기준을 적용했습니다. 콘텐츠 크기, 내부 영역, 텍스트 블록 간 간격 등 각 요소를 4의 배수로 구체적으로 제시함으로써, 클라이언트 측 관계자들도 레이아웃 구조를 직관적으로 이해할 수 있도록 설명의 명확성을 높였습니다.

4pt Grid System 1

4pt Grid System 2

CHART
GRID SYSEM

모달, 박스형 콘텐츠, 표, 버튼의 모서리(Border-radius)는 10px로 통일하여 전체 UI에 일관성을 부여했습니다. 단, 이미지 요소에는 적용하지 않았으며, 이미지의 높이는 통일하여 균형 있는 시각 배치를 유지했습니다. 또한 이미지, 박스형 콘텐츠, 표의 제목이 필요한 경우에는 좌측 정렬을 기본으로 하고, 제목과 콘텐츠 간 간격은 16px로 설정하여 4의 배수 체계를 유지했습니다. 이러한 기준을 통해 각 컴포넌트 간 시각적 일관성과 가독성을 확보하면서도, 다양한 유형의 콘텐츠를 효율적으로 배치할 수 있도록 설계했습니다.

Chart Grid System 1

Chart Grid System 2

CONTENTS
GRID SYSEM

텍스트, 박스, 테이블, 이미지 요소의 콘텐츠 배치는 단일 요소부터 다수 요소까지의 경우를 구분하여 설계했습니다. 더 많은 수의 콘텐츠를 배치해야 하는 경우에는 각 콘텐츠 크기에 맞춰 배열을 조절하도록 하여 시각적 균형을 유지했습니다. 전체 구조는 12컬럼 그리드를 기반으로 구성했으며, 12컬럼을 모두 사용하지 않고 일부 컬럼만 활용하여 배치해야 하는 경우에도 기준을 마련했습니다. 이미지 비율은 유지하면서, 2의 배수를 기준으로 컬럼을 줄여 콘텐츠를 배치하고, 모든 배치는 중앙 정렬을 기본으로 하여 전체 레이아웃의 안정성과 일관성을 확보했습니다.