JJONG2

■ 웹 폰트 적용 기존에는 설치되어 있는 서체만 사용할 수 있었다. 다음과 같이 굴림제가 없으면 궁서제를 사용하고 궁서체도 없으면 Arial 서체를 사용하는 방식으로 서체를 지정했다. font-family : "굴림", "궁서", "Arial"; 하지만 CSS3를 이용하면 사용자의 컴퓨터에 설치되어 있지 않은 서체도 사용할 수 있다. CSS의 웹 폰트는 사용하고 싶은 서체를 정하고, 해당 서체 파일의 경로를 지정해 주면 자동으로 다운로드하여 브라우저에 출력한다. 이러한 방법을 사용하려면 @font-face 속성을 이용해서 서체 이름과 서체의 파일 경로를 설정해야 한다. @font-face { font-family : 서체 이름; src : url('서체 파일 URL 경로 1'), url('서체 파일 UR..

■ 서체의 선택 서체는 같은 모양과 형태로 이루어진 글자 집합을 말하며, 글꼴 또는 폰트로도 불린다. 일반적인 방법으로는 웹 페이지에 서체를 포함시킬 수 없으므로 사용자가 웹 페이지에 지정된 서체를 보려면 사용자의 기기에 해당 서체가 설치되어 있어야 한다 CSS에는 font-familv(글꼴 집합)라는 개넘이 있는데. font-family는 서체의 우선순위를 정해서 여러 개 지정하면 그중에서 사용할 수 있는 서체를 반영하는 개념이다. 디자인에서 서체를 선택할 때 고려해야 할 요소를 살펴보자. ■ 서체의 간결한 사용 미니멀 라이프Minimal Life를 대표하는 세계적인 건축가인 미스 반 데 로에 Mies van der Rohe는 'Less is more(간결한 것이 더 아름답다)'라는 명언을 남겼다. 이..

1. 타이포그래피의 이해 ■ 웹페이지에서 쓰는 타이포그래피 타이포그래피(Typography)란 글자와 글자가 위치한 공간이나 레이아웃 등 글자로 디자인된 상태를 말한다. 웹 페이지에 사용하는 타이포그래피는 크게 두 가지 방법으로 제작된다. 첫 번째는 위드에 글자를 입력하는 것 처럼 HTML을 이용하여 글자를 입력하는 방법이다. 두 번째는 포토샵과 같은 그래픽 프로그램을 이용하여 글자를 이미지로 제작하는 방법이다. HTML을 이용하여 입력한 글자는 서체 선택이 제한적이며 사용자의 컴퓨터 환경에도 영향을 받는다. 이미지로 제작된 글자는 서체에 제약을 받지 않고 그래픽적 표현도 자유롭다. TIP : 마우스로 드래그했을 때 블록으로 처리되는 글자가 HTML을 이용해 입력한 글자이다. ■ 웹페이지에 사용하는 타이..

초록 초록은 신선하고 건강한 느낌이 전해지는 컬러라 건강 관련 사이트, 기업 PR 사이트, 교육 사이트 등에 주로 사용된다. 견강, 자연, 젊음, 생명, 신선함. 활력, 보안성 같은 긍정적인 상징과 미숙함, 다듬어지지 않음, 엄격함 부패, 부식 같은 부정적인 상징이 공존한다. 더 바디샵은 자연주의를 표방한 화장품 브랜드에 맞게 초록을 메인 컬러로 사용하여 건강하고 신선한 분위기를 전하고 있다. 파랑 파랑은 신뢰감음 주는 대표적인 컬러라 회사 홈페이지를 만들 때 가장 선호된다. 고채도 파랑은 깨끗하고 경쾌한 느낌을 주고, 검정이 많이 섞인 아두운 파랑은 도시적이고 모던한 느낌을 준다. 신뢰감, 성공, 충성심, 보수적, 안전, 첨단, 젊음, 청결, 노동력, 유용함, 강인함 같은 긍정적인 상징과 우울함. 슬픔..

3. 컬러 계획 컬러 계획 Color Planning 은 디자인을 할 때 용도나 재료를 바탕으로 기능적으로 아름다 배색 효과를 얻을 수 있도록 계획하는 것을 말한다. 웹 사이트를 만들 때는 컬러 선택도 중요하지만 배색도 이미지에 큰 영향을 미친다. 배색 이미지 매트릭스는 컬러 이미지 스케일(Color Image Scale) 이라고도 하는데, 컬러가 가지고 있는 이미지에서 느껴지는 심라를 바탕으로 감성을 구분하는 기준을 만든 객관적 통계를 말한다 디자인 등에 총체적인 의미를 부여하는 시스템으로 감각과 과학을 결합시킨 방법이다. 단색 혹은 배색의 이미지를 이미지 스케일의 각 축에 배치시킴으로써 컬러를 보고 느끼는 심리적 감성을 분석하고 구분하는 기준이 되는 매트릭스(Matrix) 이다. 은은하고 온화한 느낌..

1. 컬러의 이해 ■ 컬러의 역할 어떤 대상의 심상은 형태와 컬러 Color에 가장 많은 영향을 받는다. 두 요소 중에서는 컬러에 더 많은 영향을 받기 때문에 컬러를 더 잘 기억한다고 한다. 미국의 색채학자 루이스 체스킨Louis Cheskin에 따르면 인간이 형태를 바라볼 때는 이성적으로 반응하는데 비해, 컬러를 바라볼 때는 감정적으로 반응한다고 한다. 즉 형태는 인간의 이성을 자극하고 걸러는 정서를 자극하기 때문에 컬러가 인상에 더 강렬하게 남고 기억하기도 쉽다는 말이다. 웹 디자인에서도 컬러는 중요한 역할을 한다. ■ 컬러의 종류 우리가 볼 수 있는 컬리는 크게 RGB 컬러와 CMYK 컬러로 나눌 수 있다. ■ RGB 컬러 RGB 컬러는 빛의 3원색인 빨강Red, 초록 Green, 파랑 Blue으로..

■ 관련 있는 콘텐츠를 그룹핑 웹 사이트는 수많은 물건이 담겨 있는 창고와 같다. 이 창고는 혼자만 쓰는 곳이 아니라 접근할 수 있는 모든 사람이 함께 쓰는 곳이다. 따라서 어떤 물건이 어디에 놓여 있는지 누가 봐도 직관적으로 알 수 있도록 세부적으로 분류해야 하며, 레이블도 명확히 붙여 뒤야 한다. 우리는 실생활에서도 그룹핑의 예를 쉽게 찾아볼 수 있다. 구두를 사러 백화점에 들렀다고 하자. 지하 1층부터 지상 5층까지 차례로 들러보면서 구두를 사는 사람은 없을 것이다. 안내판을 보면서 대략 구두가 있을 법한 층으로 바로 들어설 것이다. 굳이 안내판을 보지 않더라도 지하 1충 식품 코너나 지상 4층 스포츠&아웃도어 매장에서 구두를 팔 거라고 기대하는 사람은 드물기 대문이다. 즉, 실생활에서도 비슷한 물..

웹 페이지 레이아웃의 영역은 크게 헤더(Header) 영역, 콘텐츠(Contents) 영역, 푸터(Footer) 영역으로 나뉜다. 웹 페이지 레이아웃의 영역과 요소 영역 요소 내용 헤더 (Header) 로고타입(Logotype) - 아이덴티티를 나타내는 이미지이다. - 모든 웹 페이지의 시작 부분에는 웹 사이트를 나타내는 타이틀 영역을 배치한다. 타이틀 에는 CI로 제작된 심벌이나 로고 등을 사용하여 해당 사이트의 아이덴티티와 통일성을 드러낸다. - 로고타입의 형태와 걸러는 사용자가 웹 사이트를 더 쉽게 인지하고 더 오래 기어할 수 있는 것으로 고른다. 헤더 (Header) 유틸리티(Uility) - 로그인, 화원 가입, 마이 페이지, 언어 선택, 장바구니등 웹사이트를 이용할 때 유용한 메뉴를 배치하는 ..

1. 레이아웃의 이해 레이아웃은 보통 인쇄 매체를 보기 좋게 편집하고 구성하는 작업을 일컫는다 웹 디자인에 레이아웃은 한 페이지 내에서 콘텐츠를 배치하는 작업을 말한다. 레이아웃 작업은 콘텐츠 구성을 통일성 있게 유지시키고, 즉각적으로 정보를 전달할 수 있도록 인터페이스를 효율적으로 구축하는 데 필요하다. 콘텐츠를 고객에게 효과적으로 전달하려면 레이아웃을 결정하기 전에 웹 사이트의 성격과 유형을 파악해 둬야 한다. ■ 레이아웃의 개념 페이지 레이아웃(Page Layout)은 한 페이지 내에서 콘텐츠가 배치되는 방식이다. 레이아웃에 맞춰 배치된 요소들은 일관성을 유지한 상태에서 적절한 변화를 꾀해야 한다. 일관성을 지나치게 강조하면 획일적이고 단조로운 레이아웃이 될 수 있기 때문이다. ■ 레이아웃의 목적 ..

3. 그리드 생성을 돕는 도구 처음 웹 디자인 작업을 할 때는 그리드 시스템이 익숙하지 않아 적용하거나 활용하기가 쉽지 않다. 이럴 때는 그리드 시스템을 적용하기 전에 수식을 이용해 본다. 예를 들어, 웹 사이트의 폭을 표준 모니터 크기(1280x1024px)에 적합하고 4분할이 될 수 있는 크기인 1200px로 가정하고 계산해 보면 다음과 같다 칼럼이 네 개일 때 : 1200÷4= 유닛의 폭 300px 칼럼이 여덟 개일 때 : 1200÷8= 유닛의 폭 150px 칼럼이 열두 개일 때 : 1200÷12= 유닛의 폭 100px 위와 같이 직접 수식을 계산할 수도 있지만 웹 페이지의 그리드 생성을 돕는 도구를 사용하는 것도 좋다. 그리드 생성 도구는 수식을 계산하지 않고도 원하는 폭과 칼럼 수로 그리드를 만..