--- title: "완벽한 단락을 구성하는 방법" id: "897" type: "post" slug: "%ec%99%84%eb%b2%bd%ed%95%9c-%eb%8b%a8%eb%9d%bd%ec%9d%84-%ea%b5%ac%ec%84%b1%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95" published_at: "2017-07-17T03:48:22+00:00" modified_at: "2026-07-26T00:02:10+00:00" url: "https://creative-band.com/article/wordpress/%ec%99%84%eb%b2%bd%ed%95%9c-%eb%8b%a8%eb%9d%bd%ec%9d%84-%ea%b5%ac%ec%84%b1%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95/" markdown_url: "https://creative-band.com/article/wordpress/%ec%99%84%eb%b2%bd%ed%95%9c-%eb%8b%a8%eb%9d%bd%ec%9d%84-%ea%b5%ac%ec%84%b1%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95.md" excerpt: "타이포그래피의 목적은 글꼴 크기, 글줄 길이 그리고 글줄사이를 심미적이고 규칙적으로 연관시키는 것입니다." taxonomy_category: - "워드프레스" --- 크리에이티브 밴드의 워드프레스 테마 디자인 작업은 하나의 단락(paragraph)을 구성하는 것에서부터 시작됩니다. 이 단락을 완벽하게 구성한다면 디자인 전체 공정의 50% 이상이 진행된 것과 같습니다. 단락은 ‘글꼴 크기(font size)’, ‘글줄사이(line width)’ 그리고 ‘글줄 간격(line height)’으로 구성됩니다. 이 3가지 요소들은 서로 밀접하게 연관되어 있습니다. 예를 들어 글꼴의 크기가 커진다면 글줄사이도 커져야 한다거나, 글줄 길이가 길어진다면 글줄사이도 늘어나야 합니다. 그렇다면 정확하게 얼마나 늘어나야할까요? 이 비율을 알 수 있다면 우리는 보다 쉽게 단락을 디자인할 수 있게됩니다. 사실 이 물음에 대한 답은 매우 간단합니다. 우리는 이미 자연을 통해서 아름답고 효과적인 비율이 무엇인지를 알고 있기 때문입니다. 이 비율은 식물, 동물, 은하의 형태 그리고 DNA에서도 발견될 만큼 넓게 퍼져있으며, 인류는 수천년에 걸쳐 이 비율을 적극적으로 활용해 왔습니다. 많은 예술품이나 건축물 등이 바로 그 증거죠. 맞습니다. 바로 황금비율에 관한 이야기입니다. 실제로 자연속에서 어떤 사물과 사물이 연관을 맺고 그 순서를 정할때 황금비율이 적용된다고 합니다. 구체적인 사례는 [구글을 통해서 확인](https://www.google.co.kr/search?newwindow=1&client=safari&rls=en&biw=1558&bih=969&tbm=isch&sa=1&q=%EC%9E%90%EC%97%B0+%EC%86%8D+%ED%99%A9%EA%B8%88+%EB%B9%84%EC%9C%A8&oq=%EC%9E%90%EC%97%B0+%EC%86%8D+%ED%99%A9%EA%B8%88+%EB%B9%84%EC%9C%A8&gs_l=psy-ab.3...3208.5414.0.5621.25.21.2.0.0.0.198.2686.3j16.19.0....0...1.1j4.64.psy-ab..14.6.692...0j0i30k1j0i24k1.nUwiUJpwOro) 바랍니다. 사실 타이포그래피의 목적도 글꼴 크기, 글줄 길이 그리고 글줄사이를 심미적이고 규칙적으로 연관시키는 것입니다. 황금비율이 적용된 타이포그래피는 그래서 매우 아름답고 또 효과적입니다. 그리고 이는 단지 웹 뿐만 아니라 책, 신문, 잡지 등 타이포그래피가 필요한 모든 영역에 적용됩니다. 하지만 매번 이를 위한 계산을 한다는 것은 쉬운 일이 아닙니다. 그리고 이 계산에 의한 값은 소수로 표현됩니다. 만약에 임의로 반올림해서 적용할 경우 황금비율에 의한 조화는 쉽게 깨질 수 있습니다. 이런 불편을 해소하기 위한 방법으로 미세하게 튜닝된 함수가 적용된 계산기를 이용하는 것입니다. [https://pearsonified.com/typography/](https://pearsonified.com/typography/) 황금비율이 적용된 타이포그래피는 적절한 설정을 위한 기초라고 생각하면 됩니다. 같은 크기의 글꼴이라고 하더라도 어떤 글꼴이냐에 따라서 달라 보일 수 있기 때문입니다. 뿐만 아니라 위 계산기 사이트는 로마자 기준입니다. 로마자와 한글의 구조적인 차이점을 이해하고 접근해야 합니다. 그러기 위해서도 타이포그래피의 기본에 대해서는 학습이 필요합니다. … 이렇게 완성된 사이트는 모든 사람에게 어필할 수 있는 조화로운 사이트가 될 것이라고 온 우주와 자연 그리고 천재적인 아티스트와 건축가가 장담합니다. [프로젝트 의뢰하기 →](/project-inquiry/) [카카오톡 채팅으로 문의하기 →](https://pf.kakao.com/_MwJKxl/chat) [☺ 문단 디자인 해보기 →](/paragraph/) [☺ 잘되는 웹사이트 자가진단 →](/self-check/) - [https://creative-band.com/article/wordpress/permalink-setting-for-blog/](https://creative-band.com/article/wordpress/permalink-setting-for-blog/) - [워드프레스](https://creative-band.com/article/wordpress/) **[기업 웹사이트의 블로그 주소 체계](https://creative-band.com/article/wordpress/permalink-setting-for-blog/)**워드프레스로 기업 웹사이트를 구축하고 블로그도 운영할 계획이라면, 콘텐츠를 발행하기 전에 고유주소 체계부터 정해야 합니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-09-06 - [https://creative-band.com/article/wordpress/all-about-search-asset-management-system/](https://creative-band.com/article/wordpress/all-about-search-asset-management-system/) - [워드프레스](https://creative-band.com/article/wordpress/) **[크리에이티브밴드 검색자산 관리 시스템은 어떻게 작동하나요?](https://creative-band.com/article/wordpress/all-about-search-asset-management-system/)**웹사이트와 내부 자료를 분석해 콘텐츠를 기획·생성·점검하는 크리에이티브밴드 검색자산 관리 시스템의 작동 원리를 설명합니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-09-02 - [https://creative-band.com/article/search/what-is-a-search-asset/](https://creative-band.com/article/search/what-is-a-search-asset/) - [검색](https://creative-band.com/article/search/) - [워드프레스](https://creative-band.com/article/wordpress/) **[검색자산이란 무엇인가? AI 검색 시대에 웹사이트를 자산으로 만드는 방법](https://creative-band.com/article/search/what-is-a-search-asset/)**검색자산은 기업의 정보와 콘텐츠를 웹사이트에 축적·분류·연결한 정보 체계입니다. AI 검색 시대에 왜 필요하고 어떻게 구축·운영하는지 설명합니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-09-01 - [https://creative-band.com/article/wordpress/search-asset-management-system/](https://creative-band.com/article/wordpress/search-asset-management-system/) - [검색](https://creative-band.com/article/search/) - [워드프레스](https://creative-band.com/article/wordpress/) - [유지관리 및 운영](https://creative-band.com/article/maintenance/) **[워드프레스 안에서 분석부터 발행까지, 검색자산 관리 시스템](https://creative-band.com/article/wordpress/search-asset-management-system/)**사이트와 내부 자료를 분석하고 콘텐츠 기획, 생성, SEO·GEO 점검, 내부 연결과 발행까지 지원하는 검색자산 관리 시스템을 소개합니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-08-29 - [https://creative-band.com/article/wordpress/web-typography-starts-with-a-paragraph/](https://creative-band.com/article/wordpress/web-typography-starts-with-a-paragraph/) - [워드프레스](https://creative-band.com/article/wordpress/) **[좋은 웹 타이포그래피는 하나의 문단에서 시작합니다](https://creative-band.com/article/wordpress/web-typography-starts-with-a-paragraph/)**좋은 웹 타이포그래피는 잘 읽히는 하나의 문단에서 시작합니다. 콘텐츠의 성격에 맞춰 서체를 선택하고 글줄 길이, 글자 크기와 행간의 균형을 찾은 뒤 제목과 여백으로 확장하는 크리에이티브밴드의 타이포그래피 설계 방법을 소개합니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-08-22 - [https://creative-band.com/article/wordpress/wordpress-content-structure-guide-for-page-builders/](https://creative-band.com/article/wordpress/wordpress-content-structure-guide-for-page-builders/) - [워드프레스](https://creative-band.com/article/wordpress/) **[페이지 빌더 사용자를 위한 워드프레스 콘텐츠 구조 설계 가이드](https://creative-band.com/article/wordpress/wordpress-content-structure-guide-for-page-builders/)**페이지 빌더를 사용하기 전에 웹사이트의 콘텐츠 구조 설계가 필요합니다. 이 구조가 만들어져야 페이지 빌더도 제대로 활용할 수 있습니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-08-18 - [https://creative-band.com/article/wordpress/wordpress-page-builder-experience/](https://creative-band.com/article/wordpress/wordpress-page-builder-experience/) - [워드프레스](https://creative-band.com/article/wordpress/) **[워드프레스 페이지 빌더, 직접 사용해보고 생각이 달라졌다](https://creative-band.com/article/wordpress/wordpress-page-builder-experience/)**워드프레스 페이지 빌더를 실제 프로젝트에 사용하면서 경험한 장점과 한계를 정리했습니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-08-15 - [https://creative-band.com/article/wordpress/%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%a0%9c%ec%9e%91-%ec%9d%98%eb%a2%b0-%ec%a0%84%ec%97%90-%ec%a4%80%eb%b9%84%ed%95%98%eb%a9%b4-%ec%a2%8b%ec%9d%80-%ea%b2%83/](https://creative-band.com/article/wordpress/%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%a0%9c%ec%9e%91-%ec%9d%98%eb%a2%b0-%ec%a0%84%ec%97%90-%ec%a4%80%eb%b9%84%ed%95%98%eb%a9%b4-%ec%a2%8b%ec%9d%80-%ea%b2%83/) - [워드프레스](https://creative-band.com/article/wordpress/) **[웹사이트 제작 의뢰 전에 준비하면 좋은 것](https://creative-band.com/article/wordpress/%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%a0%9c%ec%9e%91-%ec%9d%98%eb%a2%b0-%ec%a0%84%ec%97%90-%ec%a4%80%eb%b9%84%ed%95%98%eb%a9%b4-%ec%a2%8b%ec%9d%80-%ea%b2%83/)**웹사이트 제작은 기업의 정보를 구조화하는 작업입니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-07-22 - [https://creative-band.com/article/wordpress/%ed%97%b7%ea%b0%88%eb%a6%ac%eb%8a%94-%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%9a%a9%ec%96%b4-%ec%a0%95%eb%a6%ac/](https://creative-band.com/article/wordpress/%ed%97%b7%ea%b0%88%eb%a6%ac%eb%8a%94-%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%9a%a9%ec%96%b4-%ec%a0%95%eb%a6%ac/) - [워드프레스](https://creative-band.com/article/wordpress/) **[헷갈리는 웹사이트 용어 정리](https://creative-band.com/article/wordpress/%ed%97%b7%ea%b0%88%eb%a6%ac%eb%8a%94-%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%9a%a9%ec%96%b4-%ec%a0%95%eb%a6%ac/)**웹사이트, 홈페이지, 웹페이지, 랜딩페이지, 메인 내비게이션, 메인 메뉴, 카테고리, 탭 등 ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-07-16 - [https://creative-band.com/article/wordpress/css%ec%9d%98-display-flex%ec%99%80-figma%ec%9d%98-auto-layout/](https://creative-band.com/article/wordpress/css%ec%9d%98-display-flex%ec%99%80-figma%ec%9d%98-auto-layout/) - [워드프레스](https://creative-band.com/article/wordpress/) **[CSS의 display: flex와 Figma의 Auto Layout](https://creative-band.com/article/wordpress/css%ec%9d%98-display-flex%ec%99%80-figma%ec%9d%98-auto-layout/)**display: flex 를 알면 figma와 워드프레스 페이지빌더가 더 쉽습니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-07-14