주요 내용
코스: 컴퓨터 프로그래밍 > 단원 2
단원 9: 더 배우기웹 페이지 디자인
칸아카데미에서는 웹 페이지를 만드는 방법을 보여줬지만, 웹 페이지를 보기 좋게 만드는 방법을 알려주지는 않습니다. 물론, 아름다운건 보는 사람 눈에 달려있기 때문에, 여러분의 웹 페이지를 "보기 좋게" 꾸미는 것은 전적으로 여러분 (그리고 여러분의 이용자들) 에게 달린 일이지만, 도움이 될 몇 가지 팁을 알려드리겠습니다.
근사하게 보이는 것뿐만 아니라, 웹 페이지가 사용자들에게 뚜렷한 인상을 남길 수 있게 다른 웹 페이지와 달라 보이길 바랄겁니다.
그것이 가장 어려운 부분입니다. 웹 페이지를 독특하면서도 보기 좋게 만드는것. 모든 것을 얼룩말 줄무늬로 덮어버리거나 64 픽셀 크기의 폰트를 사용해서 몹시 독특한 웹 페이지를 만들 수도 있지만, 그렇게 할 건가요? 아마도 아닐겁니다.
좋은 폰트 선택하기
브라우저는 기본적으로 좀 더 정중하고 격식을 차린 페이지에서 사용되는 'serif' 글꼴을 제공합니다. 글꼴을 'sans-serif' 글꼴로 변경하거나, Garamond나 Helevetica와 같이 대부분의 사용자들의 컴퓨터에 있을 만한 특정한 글꼴로 변경할 수도 있습니다.
웹 페이지를 더 두드러지게 보이도록 하기 위해 사용자 정의 폰트를 사용할 수도 있습니다. 예를 들어, 칸아카데미는 모든 페이지에 근사한 sans-serif 글꼴인 'Lato' 를 사용합니다:
웹 글꼴를 사용한다는 것은 사용자의 브라우저가 글꼴 파일을 사용자 컴퓨터에 다운로드하고, CSS 가 해당 글꼴 파일을 참조하는 것입니다. 이건 브라우저가 추가로 다운로드해야 하는 것이기 때문에 너무 과하게 사용해서는 안되며, 사용하지 않을것을 포함하면 안됩니다. 훌륭한 무료 웹 글꼴 출처 중 하나는 Google Web Fonts 입니다. 칸아카데미에서 2 개의 구글 웹 폰트를 사용하는 있는 이 예제 웹 페이지를 확인해 보세요.
어디에서 글꼴을 가져오든 상관없이, 글꼴이 덧씌워지는 것을 경계해야 합니다. 일반적으로, 하나의 페이지에 2-3개 이상의 글꼴을 사용해서는 안되며, 글꼴은 서로 잘 어울려야 합니다. 여기 서로 어울리는 구글 웹 폰트의 예시를 보여주는 도움이 될만한 웹 사이트가 있습니다.
좋은 색상 선택하기
웹 페이지를 디자인할 때, 색상 팔레트를 사용하는 것이 좋습니다. 팔레트는 다양한 영역에 사용할 수 있는 서로 잘 어울리는 색상의 범위를 말하는데, 팔레트는 단지 보기 좋으면 될 수도 있고, 회사 로고에 기반을 둬야 할 수도, 페이지의 테마와 연관이 있어야 할 수도 있습니다.
팔레트를 선택하는 데 도움이 필요한가요? 이미 팔레트의 기본색으로 사용하고 싶은 색을 조금이라도 알고 있다면, 단색, 삼색, 인접한 색, 그리고 사색 등의 각기 다른 유형의 팔레트들을 시각화해주는 도구인 Paletton에 가보세요.
만약 아무것도 없이 처음부터 시작하는 상황이라면 색상, 팔레트, 패턴에 대한 아이디어 등을 공유하는 COLOURLovers에서 팔레트를 살펴보세요. 이 팔레트는 "Giant Goldfish"라고 불리는 팔레트입니다:
일단 팔레트를 선택했다면, 이제 어려운 부분에 도달했습니다: 웹 페이지의 각 부분에 어떤 색을 적용할지 결정해야 합니다. 제목은 무슨 색이어야 할까요? 링크 색상은? 텍스트는? 배경색은? Paletton에서 가장 좋은 기능은 바로 팔레트를 사용한 예제 웹 페이지를 제공해준 다는 것입니다:
팔레트를 CSS로 변환하는 방법을 생각할 때, 고려할 몇 가지 상황이 있습니다.
- 만약 링크의 스타일을 기본값에서 너무 많이 변경한다면, 사용자들이 더 이상 링크를 인지하지 못할 것입니다.
- 텍스트의 전경색과 배경색은 사용자들이 눈을 찡그리지 않아도 구분할 수 있을 만큼 충분히 대조되어야 합니다. 이 대조표에서 여러분의 색을 확인해보세요.
- 많은 사람들은 색맹입니다. 어떤 색상 조합은 그들이 구분할 수 없습니다. 이 색맹 시뮬레이터 에서 여러분의 색상 조합을 확인해보세요.
만약 색상 팔레트를 사용하는 방법에 확신이 들지 않는다면, 친구들의 의견을 구해보세요. 모든 내용을 읽을 수 있다고 하나요? 무엇이 클릭 가능한지 알 수 있다고 하나요? 얼굴을 찡그리게하는 색상이 있나요? 친구들이 좋아하는 색은 무엇인가요?
여백의 활용
구글에서 디자이너로 일하는 제 동료에게 무엇이 그의 훌륭한 디자인의 비밀인지 물어본 적이 있습니다. 그의 대답이요? "여백이라는군요!"
여백(whitespace) 은 요소들 사이의 비어있는 공간을 말하며, CSS 에서는 주로 padding, margin, line-height 등의 속성으로부터 만들어집니다
제 친구가 옳았습니다. 여백은 웹 페이지가 얼마나 좋아 보이는지 뿐만 아니라 가독성에도 큰 영향을 끼칠 수 있습니다. 제 디자이너 친구는 종종 여백을 수정하느라 몇 시간씩을 보내곤 하는데, 여백이 얼마나 중요한지 알기 때문입니다.
극단적인 예로, 여기서 사이드바가 여백을 갖고 있는 경우와 여백이 없는 경우를 비교한 것을 봅시다:
무슨 생각이 드나요? 여백에 대해서 똑부러지는 규칙을 정하긴 어렵지만 다음을 생각해 보세요. 다른 요소 옆에 위치하고 있는 모든 요소들에 얼마만큼의 여백이 있는지, 배경이나 경계를 갖고있는 모든 요소에 대해서 그들이 얼마만큼 내부에 여백을 갖고 있는지, 단락과 리스트가 읽기 편하도록 줄 간격이 넉넉한지 고려해 보세요.
템플릿과 프레임워크로부터 시작하기
아마 여기 있는 모든 가이드라인들을 읽은 후에 겁이 날 수도 있습니다. 특히 여러분 스스로 디자인에 대한 감각이 없다고 생각한다면 더 그럴 수도 있습니다. 걱정하지 마세요, 근사하게 보이는 웹페이지를 만들기 위해서 디자인 전문가가 될 필요는 없습니다. 대신, 템플릿이나 프레임워크로부터 시작해서 다른 디자이너가 그 안에 쏟아부은 노력을 활용할 수 있습니다.
템플릿은 임의의 내용을 담고 있는 완성된 웹 페이지처럼 보이는 HTML과 CSS입니다. OpenDesigns.org 이나 웹에서 "무료 웹페이지 템플릿"—(찾은 템플릿이 무료가 맞기를 바라면서요!)이라고 검색하면 템플릿을 찾을 수 있습니다. 템플릿을 다운로드하면, 자신의 콘텐츠로 대체하거나 필요에 따라 CSS를 변경할 수도 있습니다.
CSS 프레임워크는 멋진 웹사이트의 기초가 되어주는 CSS 형식의 모음입니다. Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat 등등 좀 더 쉽게 예쁜 웹사이트를 만들 수 있게 해주는 CSS 프레임워크가 많습니다. 여기 칸아카데미에서 Twitter Bootstrap 와 ZURB foundation의 예시를 볼 수 있습니다.
CSS 프레임워크를 다운로드하면 문서 내에서 예시를 찾아볼 수 있고—대개 템플릿 또한 제공받을 수 있습니다—어떤 CSS 클래스 네임이 원하는 웹 페이지를 만들 수 있게 하는지 찾아보세요.
템플릿이나 프레임워크를 사용하는 경우 여러분의 웹 사이트가 다른 웹 사이트와 완전히 똑같이 보여 사용자들의 마음 속에 인상깊게 남지 못할 위험을 감수해야 합니다. 이를 피하기 위해서 여러분 고유의 로고를 추가하고 글꼴이나 배경색 등의 몇 가지 주요 요소들을 변경하세요.
대화에 참여하고 싶으신가요?
웹 글꼴를 사용한다는 것은 사용자의 브라우저가 글꼴 파일을 사용자 컴퓨터에 다운로드하고, css 가 해당 글꼴 파일을 참조하는 것입니다. 이건 브라우저가 추가로 다운로드해야 하는 것이기 때문에 너무 과하게 사용해서는 안되며, 사용하지 않을것을 포함하면 안됩니다.
그렇다면, 구글폰트는 각 글씨체들을 어떻게 불러오나요? 이미지가 아니던데 렉도 많이 안먹고 신기하네요! ㅎㅎ(추천 4 번)