다크 / 라이트 모드
레이아웃 기획
웹사이트 개발의 시작이면서 가장 중요한 단계
홈페이지를 제작하려면 가장 먼저 레이아웃과 디자인 그리고 컨텐츠에 대한 기획을 해야 합니다.
레이아웃은 전체적인 웹사이트의 구조를 의미하고, 디자인은 그 구조 속의 시각적 모습을 의미합니다.
컨텐츠는 주로 홈페이지가 알리고 싶은 정보에 해당하는데, 텍스트, 이미지 그리고 동영상과 같은 내용입니다. 이 컨텐츠에 관해서는 이 후 컨텐츠 작성 요령이나 이미지 작업 페이지에서 살펴보겠습니다.
병의원 홈페이지의 레이아웃은 기본적으로 관리자가 원하는 레이아웃을 백지에서 마치 스토리보드 작성하듯 그려서 정하는 방법이 있고, 포토샵이나 아도비 XD 또는 Figma 같은 프로그램으로 디자인하는 방법 그리고 웹서핑을 통해 가장 마음에 드는 레이아웃을 정해서 보완하는 방법이 있겠습니다.
폰트(Fonts)
폰트는 웹사이트의 텍스트 디자인인데 흔히 글꼴 또는 글자체라고 합니다.
과거 한글에 대한 웹폰트가 부족했던 시절에 비해 오늘날은 전문 회사, 관공서(한국의 자치단체) 등에서 폰트를 개발해 비상업적인 용도를 전제로 무료로 제공해 주고 있어 다양한 폰트를 이용할 수 있습니다.
Google Fonts
전세계 언어의 일부 무료 웹폰트를 링크와 임포트(import) 방식으로 제공해 주고 있습니다. 제목인 "Google Fonts"를 클릭하면 해당 사이트로 연결됩니다. 특정 폰트를 검색할 수 있고 옵션으로 나라의 언어를 체크하면 원하는 폰트를 확인할 수 있습니다. 2020년 12월 현재 한글 폰트로는 총 26종이 등록되어 있습니다.
Early Access - Google fonts
정식 구글 폰트에 등록되기 전 단계의 폰트 사이트로 알고 있는데, 역시 제목인 "Early Access - Google fonts"를 클릭하면 해당 사이트로 연결됩니다. 별도의 검색이나 언어 옵션은 제공하지 않는데, 키보드에서 Ctrl(Cmd) + F를 눌러 Korean 으로 검색해 보시면 2020년 12월 현재 6종의 한글 폰트가 등록되어 있습니다.
나눔 폰트
네이버가 만들 글꼴로 2020년 12월 현재 8개의 나눔 패밀리 폰트와 시험판으로 마루 부리 폰트를 사용할 수 있습니다. 제목인 "나눔 폰트"를 클릭하시면 해당 사이트로 연결됩니다. MediPress의 폰트는 "나눔바른고딕폰트"를 사용하고 있습니다.
서울시 폰트
서울특별시에서 제작한 폰트로 서울한강체, 서울남산체, 서울한강장체, 서울남산장체 총 4종을 제공하고 있습니다. 이 폰트는 윈도우 같은 OS에서도 사용할 수 있으며 웹폰트로 이용할 수 있습니다. 제목인 "서울시 폰트"를 클릭하면 해당 사이트로 연결됩니다.
이롭게 바탕체
웹개발 회사인 (주)이롭게가 개발한 이롭게 바탕체(Iropke batang font)입니다. 비상업적 용도로 무료 사용가능합니다. 세리프체(serif)입니다. 제목을 클릭히면 해당 사이트로 연결됩니다.
CDN으로 바로 사용가능한 한글 웹폰트
Ludens 블로그에 포스팅된 cdn으로 바로 사용가능한 한글 폰트 포스트를 소개해드립니다. 제목을 클릭하세요.
만약 유료 폰트를 사용하시려면
유료 폰트는 일정 기간(보통 1년)을 주기로 비용을 지불하고 폰트를 사용할 수 있습니다.
브랜드 컬러(Brand Color)
웹사이트에서 컬러는 컬러의 이름(물론 영어로), rgb 코드 그리고 헥사 코드로 표기할 수 있습니다.
웹사이트의 전체 배경색 또는 부분 섹션 배경색 그리고 폰트의 색상에 이용됩니다.
이 중 배경색은 병의원의 실제 인테리어 색상과 어느 정도 일관성있게 통일해주는 것이 좋은데, 이를 브랜드 컬러라고 합니다. 일반적으로 로고에서 2-3가지 색상을 추출해서 밝기와 어둡기를 조정해서 결정합니다.
이 페이지나 포스트를 소셜네트워크에 공유해주세요!