Web Design

웹사이트의 레이아웃

by TheVOS posted Mar 14, 2019 Views 52 Likes 0 Replies 0
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print Attachment
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print Attachment
Extra Form

웹사이트는 많은 정보를 담고 있습니다.

저마다 각양각색의 콘텐츠를 다양한 형태의 레이아웃으로 배치합니다.


레이아웃이란 디자인 ·광고 ·편집에서 문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일(출처 : 두산백과)이라고 합니다.


우리가 보는 여러 매체들은 이러한 법칙에 의거하여 다양한 형태의 레이아웃으로 디자인되어있습니다.


(c) Pinterest


(c) Pinterest

보통 책이나 신문과 같은 매체들의 레이아웃은 "Grid"라는 격자를 바탕으로 텍스트와 이미지 그밖에 여러 요소들을 배치하게 됩니다.



(c) Google

방대한 텍스트의 가독성과 여러 페이지에 일관된 형태를 부여하기 위해서 2단 3단 혹은 4단 등 다양한 단의 경우의 수를 적용합니다. 


아마도 이러한 것들이 편집디자인의 개념이라고 볼 수 있겠죠^^

편집이 잘되어있다는 말은 "가독성"과 "심미성"등이 적절히 적용되었다는 말과 같습니다.


그렇다면 웹사이트도 이런 편집의 개념이 적용될까요?


(c) Pinterest

그렇습니다. 웹디자인도 "그리드"와 "단", "여백"등 편집의 요소가 적용이 됩니다. 텍스트와 이미지 혹은 그밖에 여러 가지 요소를 보기 좋게 그리고 사용성에 맞게 배치하는 개념은 동일합니다. 

(c) Pinterest



그렇다면 일반적인 종이매체의 편집과 웹사이트의 편집은 무엇이 틀린가요?


(c) Pinterest

책이나 인쇄물은 인쇄할 대상에 맞는 크기로 격자를 만듭니다.

하지만 웹사이트는 "해상도(Resolution)"라는 개념이 적용되죠.


(c) Pinterest

보통 웹사이트의 그리드에서 단(Coulume)을 12개까지 만들면 PC부터 Mobile까지 다양한 해상도에 대응 할수 있는 레이아웃을 만들 수 있습니다.




일반적으로 책에서는 "목차"를 통해 원하는 곳을 갈 수 있습니다.

(c) Pinterest


웹사이트에서는 GNB메뉴를 통해 원하는 메뉴를 더욱더 빠르게 이동할 수 있습니다.

(c) Pinterest


또한 버튼을 통해 사용자가 원하는 기능을 실행시킬 수도 있습니다. 사용자와 어떠한 서비스를 연결해주는 매개체가 바로 UI인데 웹디자인에서는 이러한 UX/UI개념을 바탕으로 레이아웃을 고민하게 됩니다.

(c) www.dominos.co.kr



그리고 모션을 통해 단순한 콘텐츠를 좀 더 생동감 있게 전달하기도 합니다.


결론적으로 편집+웹사이트의 속성을 잘 이해하고 그것을 적절히 접목하면 보기도 좋고 사용성 좋은 웹디자인을 만들 수 있을 것입니다.


웹디자이너로서 편집과 새로운 레이아웃을 만드는 것이 취약하다고 느끼신다면, 이러한 디자인의 기본 속성인 "레이아웃"에 대한 이해가 부족해서 일수도 있습니다.


카드 디자인과 빅 비주얼의 조합이라는 하나의 트렌드가 비슷한 모습을 보일 수는 있지만, 좀 더 디자인의 기본적인 개념에 입각하여 작업한다면 안정적이고 경쟁력있는 디자인을 할 수 있습니다.



오브로디자이너



[ 원문출처 ] https://brunch.co.kr/@5bro/66

?

  1. [구글 양식 활용] 전화번호 입력 폼 만들기 07Oct

    [구글 양식 활용] 전화번호 입력 폼 만들기

    This is a secret article.
    Date2019.10.07 Category$user_lang->userLang20180213192209093 ByTheVOS Reply0 Views0 secret
    Read More
  2. 16Aug

    8/20未明から早朝にかけての1分〜3分程度のサーバー停止を伴うシステムメンテナンスのお知らせ

    8/20未明から早朝にかけての1分〜3分程度のサーバー停止を伴うシステムメンテナンスのお知らせ 平素はTHEVOSをご利用いただきありがとうございます。 THEVOSの「ホームページ無料制作 TMS(Total Management Service)」をご利用中のお客様にメンテナンスのご案...
    Date2019.08.16 Category$user_lang->userLang20180310000323036 ByTheVOS Reply0 Views43 file
    Read More
  3. 14Mar

    웹사이트의 레이아웃

    웹사이트는 많은 정보를 담고 있습니다. 저마다 각양각색의 콘텐츠를 다양한 형태의 레이아웃으로 배치합니다. 레이아웃이란 디자인 ·광고 ·편집에서 문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일(출처 : 두산백과)이...
    Date2019.03.14 CategoryWeb Design ByTheVOS Reply0 Views52 file
    Read More
  4. スクロールに反応するjQueryプラグインコレクション10 24Feb

    スクロールに反応するjQueryプラグインコレクション10

    This is a secret article.
    Date2019.02.24 Category$user_lang->userLang20180310000416044 ByTheVOS Reply0 Views0 secret
    Read More
  5. 11Dec

    검색엔진 최적화 방법 - Canonical 태그의 중요성과 활용 방법

    Canonical 태그에 대하여 알아보고 어떻게 사용하며 SEO에 어떤 장점이 있는지 함께 알아봅니다. 먼저 Canonical 태그는 무엇일까요? # Canonical 태그란? Canonical 태그는 페이지의 헤더에 삽입하는 코드로 현재의 웹페이지의 대표 url주소를 검색엔진에 알...
    Date2018.12.11 Category$user_lang->userLang20180213192209093 ByTheVOS Reply0 Views54 file
    Read More
  6. 23Nov

    THEVOSでWEBシステム開発に使用されているPHPバージョンのご案内

    PHPバージョンの詳細は以下です。 PHP7.2.6 / PHP7.1.18 / PHP7.0.30 現在公式にサポートされているバージョンです。 PHP7 は PHP5 と比較してパフォーマンスが大幅に強化されています。 ※ 現在使用しているPHPのバージョンが5.Xのバージョンの以下の開発を依...
    Date2018.11.23 Category$user_lang->userLang20180310000323036 ByTheVOS Reply0 Views87 file
    Read More
  7. 01Nov

    스포카, ‘스포카 한 산스’ 글꼴 무료 배포

    스포카가 오는 한글날을 기념해 자체 개발한 글꼴 ‘스포카 한 산스(Spoqa Han Sans)’를 출시·배포한다고 10월8일 밝혔다. 스포카 한 산스는 구글과 어도비가 합작 개발한 ‘본고딕’ 글꼴을 수정해 개발됐다. 본고딕에 포함된 영문, 숫자, 특수문자의 60자 안팎...
    Date2018.11.01 Category$user_lang->userLang20180310000416044 ByTheVOS Reply0 Views117 file
    Read More
  8. 11Oct

    [안랩] 다수의 보안 프로그램 무력화하는 악성코드 유포 중... 주의!

    출처 https://www.ahnlab.com/kr/site/securityi...ontent=741 V3 Lite 등 보안 프로그램을 무력화하는 악성코드가 확인됐다. 특히 이번에 발견된 악성코드는 윈도우 운영체제에 기본으로 제공되는 ‘윈도우 디펜더(Windows Defender)’도 무력화하는 것으로 확...
    Date2018.10.11 Category$user_lang->userLang20180309235346060 ByTheVOS Reply0 Views120 file
    Read More
  9. 24Apr

    피해자거나 공범(?)이거나, USB 악성코드

    대학생「J」은 미처 출력하지 못한 자료를 USB에 담아 서둘러 학교 앞 인쇄소를 찾았다. 다행히 출력한 자료와 함께 수업 시간에 늦지 않게 강의실에 도착한 그녀는 뿌듯한 마음으로 노트북을 켜고 USB를 연결했다가 깜짝 놀랐다. USB 에 있던 파일이 전부 사...
    Date2018.04.24 Category$user_lang->userLang20180309235346060 ByTheVOS Reply0 Views233 file
    Read More
  10. 31Mar

    サイトをオープンしました。

    まだ正常なオープンはありません。 ホームページが完成していないが、顧客との連絡をご利用になれするためにオープンしました。 お客様の作業が押されており、当社のホームページを飾るのはちょっと先送りておくことにしました。 内容を着実に詰めていきます。
    Date2018.03.31 Category$user_lang->userLang20180310000323036 ByTheVOS Reply0 Views136 file
    Read More
  11. 27Mar

    「DreamBot(ドリームボット)」ウィルス感染による不正送金被害にご注意ください。

    最近、 「DreamBot(ドリームボット)」ウィルスに感染したパソコン等によるインターネットバンキングの不正送金被害 が全国的に広がっています。 このウィルスに感染すると、お客様がインターネットバンキングにログインする際に、正規の画面と全く区別がつか...
    Date2018.03.27 Category$user_lang->userLang20180310000416044 ByTheVOS Reply0 Views226 file
    Read More
  12. 15Mar

    株式会社オーセル無料制作サービスを開始します。

    ルーバディ製品をロンチングし、ホームページの制作と管理を依頼しました。 14日デザインの決定をし、15日から作業を開始します。
    Date2018.03.15 Category$user_lang->userLang20180315024137026 ByTheVOS Reply0 Views125 file
    Read More
  13. 10Mar

    無料SSLサポートサービスが追加されました。

    Let's Encrypt Wildcard SSLサポートします。 Total Management Serviceに無料SSLのサポートサービスが追加されました。
    Date2018.03.10 Category$user_lang->userLang20180309235346060 ByTheVOS Reply0 Views130 file
    Read More
  14. 04Feb

    CTA 「Call to Action」とは何でしょうか?

    「Call to Action」とは何でしょうか? コールトゥアクション(Call to Action)とは、ホームページの訪問者に何らかの行為を勧めたり誘導するためのツールや技法を意味する。「転換率」を高める重要な役割を果たしている。 下の画像で赤丸で示した要素がコー...
    Date2018.02.04 Category$user_lang->userLang20180213192209093 ByTheVOS Reply0 Views137 file
    Read More
List
Board Pagination Prev 1 Next
/ 1