[웹디자인기능사] 필기 46 웹 페이지 디자인 ~ 50 사용자 인터페이스

46. 웹 페이지 디자인

 

1. 웹 디자인(Web Design)

• 웹 디자인이란?
  • 웹 페이지를 디자인하고 제작하는 것
  • 웹과 디자인이라는 두 가지 개념이 결합된 것
  • 웹 디자인은 개인용 홈페이지 외 기업용, 상업용 등 매우 다양함
• 웹 디자인을 위한 조건
  • 일관성을 유지하며 현재 위치를 알 수 있도록 함
  • 웹 사이트의 주제를 쉽게 파악할 수 있도록 구성
  • 내비게이션 최적화
• 웹 디자인 기획 시 고려해야 할 사항
  • 사이트의 목적과 필요성을 충분히 인식하였는가?
  • 벤치마킹 : 유사, 경쟁 사이트의 디자인 분석은 완료했는가?
  • 통일성 확보를 위한 컬러, 톤, 폰트, 레이아웃의 원칙들은 수립되었는가?
• 웹 디자인 발상의 전개과정
  발의 → 연구/조사 → 분석 → 평가 → 개발 → 전달
  • 발의 : 어떤 사이트를 어떻게 만들 것인가에 대한 의견제시 과정
  • 연구/조사 : 웹 디자인 트렌드 및 유사 업종의 웹 사이트를 연구/조사함
  • 분석 : 연구/조사한 결과를 가지고 웹 디자인에 적용할 요소들과 차별화하여 추가될 내용을 분석하고 콘셉트(Concept) 확정
    - 디자인 스타일링 : 콘셉트에 맞추어 아이디어를 수집, 발전, 결정하는 것
  • 평가 : 웹 디자인의 방향성이 맞는지 평가
  • 개발 : 본격적으로 디자인 작업이 진행되기 전 시각적으로 확인할 수 있는 시안 제작
    - 아이디어 스케치 : 웹 사이트의 콘셉트를 이끌어내기 위해 종이에 최대한 많이 그려봄으로써 여러 가지 구성을 만들어보는 디자인 실무의 초기 작업
    - 인력을 적재적소에 분배하여 주어진 시간에 맞춰 디자인을 함
  • 전달 : 최종 결과물을 클라이언트에게 전달
• 웹 디자인 과정에서 고려해야 할 사항
  • 웹 페이지의 일관성 유지
  • 레이아웃 설계
  • 웹 페이지의 배색 조화
  • 사용자 인터페이스(UI)를 고려해 편리한 구조로 디자인함
  • 사이트 맵을 통해 구조를 파악할 수 있도록 함
  • 로딩 시간을 줄이기 위해 이미지 최적화
  • 단순하고 간결하게 하며, 이미지나 동영상을 남용하지 않음.
    만약, 이미지와 동영상이 너무 많다면 로딩 시간이 길고 웹 페이지의 가독성이 떨어짐
• 웹 페이지의 레이아웃 디자인 시 주의사항
  • 콘텐츠의 연결이 일관성 있고 논리적이어야 함
  • 중요한 콘텐츠부터 배치한 후 세부 콘텐츠 배치
  • 텍스트와 그래픽 요소를 적절히 조화시킴
  • 단순하고 간결하며, 사용자가 쉽게 콘텐츠를 찾을 수 있도록 구성

2. 웹 디자인 프로세스

• 웹 디자인 프로세스(Process)
  주제 설정 → 콘텐츠 준비 → 레이아웃 설계 → 페이지 제작 → 테스트 및 수정 → 서버에 업로드 → 유지보수
• 웹 디자인 프로세스(Process)  3단계

사전 제작 단계(Pre-Production)

- 프로젝트 기획, 웹 사이트 기획, 디자인 계획 수립, 콘셉트 구상, 디자인 구체화 - 콘셉트 정하기 → 사이트 맵 그리기 → 기본 디자인 구상하기 → 세부 디자인 구상하기

제작 단계(Production)

- 웹 사이트 구축 - 콘텐츠 제작, 사이트 구축, 서버 구성

후반 제작 단계(Post-Production)

- 유지 및 관리 - 사이트 홍보, 홍보 콘텐츠 제작

• 웹 디자인 프로세스 도입의 장점
  • 효율적인 인력 분배
  • 피드백 및 시행착오 최소화
  • 각 팀 간의 원활한 의사소통

 

47. 웹 페이지 제작 단계

 

1. 웹 페이지 제작 및 관리 순서

주제 결정과 구성도 작성 → 자료수집과 정리 → 홈페이지 제작 → 웹 서버에 업로드 → 검색엔진 등록과 홍보 → 내용 업데이트 및 유지보수 관리

 

2. 웹 페이지 제작 시 고려해야 할 사항

• 아무리 좋은 내용을 담고 있는 웹 페이지라 해도 디자인이 산만하면 사용자가 보기 불편함
• 배경색과 문자 색상을 고려하여 가독성을 높일 수 있도록 해야 함
• 웹 디자인의 일관성을 유지하면서 동시에 사용성을 높여야 함
• 텍스트를 읽을 때 그래픽이 방해되지 않아야 함
• 한 페이지에 너무 많은 것을 보여주기 위한 욕심은 버려야 함
• 자신의 홈페이지 주소를 간단하고 기억하기 쉽게 구성
• 웹 페이지에 찾아오거나 나가기 쉽게 함
• 스크롤 화면은 되도록 사용하지 않도록 하여 로딩 시간도 줄이고 간단명료하게 디자인되어야 함

3. 템플릿(Template)

• 형판, 보기 판이라는 뜻을 가진 단어로, 템플릿 디자인이란 홈페이지 레이아웃 형을 만드는 것을 의미함
• 개략적인 디자인을 만들고, 그 이후에 세부적인 디자인 요소를 별도로 만드는 방법

4. 배경 이미지와 메뉴(내비게이션)

• 배경 이미지가 클 경우 용량 증가로 로딩이 늦어짐
• 메뉴는 메타포를 이용하여 디자인함
• 배경의 색상을 분화시켜 사용하면 프레임이 사용된 것처럼 보임

5. 색상 선택 단계의 작업

• 색 혼합이나 색상, 명도, 채도들을 원하는대로 조절할 수 있으며 색상을 다양하게 사용할 수 있음
• 상식적인 수준을 따르는 것이 좋음
• 보색 사용은 자제함
• 배경색과 배경 무늬는 심플한 것이 좋음

6. 웹 사이트 구축 시 고려사항

• 명확하고 일관된 내비게이션 유지
• 가급적 플러그인이 필요 없는 페이지를 만듦
• 안정된 기술 사용

 

48. 웹 페이지 구성요소

 

1. 웹 레이아웃(Layout) 디자인

• 콘텐츠가 서로 조화를 이루며 논리적으로 보일 수 있도록 시각적으로 계층구조를 만드는 것
• 단순하고 간결하며, 사용자가 쉽게 콘텐츠를 찾을 수 있도록 구성
• 콘텐츠의 연결이 일관성 있고 논리적이어야 함
• 텍스트와 그래픽 요소를 적절히 조화시킴
• 화면의 사이즈는 현재 가장 많은 사용자가 사용하는 그래픽 카드의 해상도를 기준으로 함
• 안전영역(Safe Zone) 안에 중요한 메뉴가 위치하도록 작업
• 일관성 있는 메뉴 바나 내비게이션 바의 페이지 간 연속성을 통하여 사용의 익숙함을 가지도록 함

2. 그리드 시스템(Grid System)

디자이너는 각 해상도마다 사이트가 어떻게 보이게 할 것인지를 결정하고, 일관적인 작업이 이루어지도록 구성요소들이 배치되는 크기를 비례감 있게 잡아야 함

 

3. 내비게이션(Navigation) 디자인

• 페이지 수가 많고, 담고 있는 정보가 복잡할수록 그 구성과 형태를 얼마나 잘 체계화하고, 적절한 장소에 위치시키느냐에 따라 쉬운 정보 검색을 해주는 디자인 작업
• 정보의 구조가 완성되면 이러한 정보들 사이를 자유롭게 돌아다닐 수 있어야 함
• 하나의 최종 정보에 도달하는 방법이 반드시 하나일 필요는 없고, 위계적인 구조 이외에도 검색 창, 사이트 맵, 퀵 링크 등 다양한 경로와 방법을 통해 빠르고 쉽게 접근해서 원하는 정보를 찾아낼 수 있어야 함
• 페이지를 연계하여 이동하고 연결하는 하이퍼미디어 시스템의 링크 구조
• 일관성 있는 내비게이션을 만들어야 함
• 로딩 속도를 고려해야 함
• 링크가 끊어진 페이지가 없어야 함
• 사용자의 환경을 고려해야 함

4. 내비게이션 구조의 요소

• 사이트 메뉴 바 : 웹 사이트의 좌측이나 우측에 메뉴, 링크 등을 모아둔 것
• 사이트 맵(Site Map)
  • 웹 사이트의 전체 구조를 한 눈에 알아볼 수 있도록 트리 구조 형태로 만든 것
  • 이미지 파일을 제외한 모든 파일의 리스트 및 디렉터리 구조를 작성해 보여주는 것
• 디렉터리 : 주제나 항목을 카테고리 별로 계층적으로 표현하는 방식
• 내비게이션 바 : 메뉴를 한 곳에 모아놓은 그래픽이나 문자열 모음

5. 내비게이션 구조의 종류

순차적 구조(선형적 구조)(Sequential)

하나의 홈페이지에서 다음 홈페이지로 또 다음 홈페이지로 연결된 구조로 주제별 검색에 많이 사용됨

계층적 구조(Hierarchical)

- 하나의 홈페이지가 있고 그 홈페이지의 메인 페이지는 단순한 메뉴로만 보여주고 하위 페이지들로 계층적으로 연결되는 구조 - 정보의 양이 많고 정보의 우선순위에 따라 사이트를 제작할 때 유용한 웹 사이트 탐색구조

그리드 구조(Grid)

많은 양의 데이터를 카테고리로 나누어 분류할 때 사용

네트워크 구조(그물형 연결 구조)(Network)

개별 정보가 있는 웹 페이지의 정보를 순서 없이 나열한 형태로 수많은 페이지가 나열된 복잡한 구조

 

6. 배너

텍스트, 이미지, 동영상 등의 조합으로 광고나 홍보용으로 사용되는 이미지

 

7. 컬러

웹 사이트의 성격, 주 타겟층, 표현하고자 하는 콘텐츠에 따라 달라짐

 

 

49. 타이포그래피 - 웹 폰트

 

1. 타이포그래피(Typography)

• 고정적인 타이포그래피와 움직이는 동적인 타이포그래피가 있음
• 넓은 의미로 인쇄술을 의미하며, 인쇄를 전제로 한 문자 표현이나 작품을 지칭
• 웹 폰트로도 사용되며, 주어진 면적 안에서 시각화할 수 있는 정보량을 명료도, 가독성 정도를 고려하여 결정하면서 동시에 그 서체의 아름다움이나 내용 표현의 적절성, 표현성 등을 갖추어야 하는 것으로 발전

2. 타이포그래피 구성요소

세리프(Serif)

- 글자의 끝부분에 돌기가 있음 - 본문 기본서체, 여성적이고 섬세, 우아함

산세리프(Sans Serif)

- 글자의 끝 부분에 돌기가 없음 - 남성적이고 힘참

베이스라인(Baseline)

글자의 기본 정렬선(중심선)

높이(Height)

글자의 높이(세로 길이)

행간(Line-spacing)

글자와 글자 사이의 행 간격

자간(Letter-spacing)

글자와 글자 사이의 간격

 

3. 동적(움직이는) 타이포그래피

• 키네틱 타이포그래피(Kinetic Typography)
  기존의 정적인 타이포그래피와는 달리 움직이는 동적인 타이포그래피를 나타내는 것으로 빛의 속성을 가지고 있고, 소리가 첨가되며, 무빙 타이포그래피 또는 모션 타이포그래피라고도 함
• 그 외 다이내믹 타이포그래피, 스타일리시 타이포그래피 등이 있음

4. 정적(고정적인) 타이포그래피

스테이틱 타이포그래피(Static Typography)

 

5. 웹 타이포그래피 디자인(Web Typographic Design)

시각 디자인의 한 영역이며 글자체, 글자 크기, 행간, 여백, 간격, 단락, 그리드 등을 통해 전달됨

 

6. 웹 폰트(MWF)의 특징

• 웹에서 사용되는 타이포그래피
• 벡터 그래픽 파일포맷
• 타이포그래피는 문자의 모양과 배열을 의미하는 것으로 웹과 접목되면 다양한 표현이 가능해짐
• 웹의 타이포그래피를 이용하여 동적이고 인터랙티브한 구성이 가능해짐
• 웹 폰트는 작은 사이즈의 글자를 사용한 경우에는 깨끗하게 보여 가독성이 높음
• 문법에 맞지 않는 한글이나 한자의 경우에는 표현이 불가능한 경우도 있음
• 웹 폰트를 사용해서 사이트를 만든 경우 해당 폰트가 컴퓨터에 설치되어 있지 않아도 적용한 폰트를 볼 수 있음

7. 웹에서 타이포그래피 적용 시 고려할 사항

• 가독성과 판독성을 고려한 서체 사용
• 웹 페이지의 여백과 문장의 정렬 고려
• 사이트의 내용과 콘셉트(Concept)에 어울리는 서체 사용

8. 웹에서 타이포를 이용한 애니메이션을 구현할 수 있는 프로그램

• 플래시(Flash)
• 스위시(Swish)
• 플렉스(Flax)

9. 서체(폰트)

영문
세리프체(Serif)	산세리프체(Sanserif)
글자의 끝부분에 돌기가 있는 서체	글자의 끝부분에 돌기가 없는 서체
국문
명조체	고딕체
가로 선이 세로 선보다 가늘며 세리프가 있는 서체	서체의 가독성은 떨어지지만 눈에 쉽게 띄는 특징이 있어 제목용으로 많이 쓰임

 

 

50. 사용자 인터페이스

 

1. 인터페이스(Interface)

장치를 통해 데이터를 주고받는 상호교환을 하며 2개의 컴퓨터 시스템 장치를 기능적으로 연결

 

2. 인터페이스 디자인

전체 페이지에 적용되는 시각적 계층구조와 효율적인 내비게이션을 위해 버튼 및 아이콘 시스템에 대한 설계를 하는 것

 

3. 웹 인터페이스 디자인에서 강조되는 특성

• 사용자 편의성 : 정보접근이 용이하고 기억하기 쉬워야 함
• 일관성 : 전체 구조 및 그래픽적 요소를 일관성 있게 디자인해야 함
• 심미적 구성 : 시각적인 커뮤니케이션을 통해 사용자의 정보흡수와 작업수행을 도와야 함
• 독창성 : 능력과 개성에 의거하여 새로운 것을 만들어 내는 성질

4. 웹 디자인에서 사용자 인터페이스를 설정할 때 고려해야 할 사항

• 최단 시간에 사이트를 방문한 목적을 이해할 수 있도록 함
• 화면을 스크롤 했을 때 링크 버튼이 보이지 않는 일이 없도록 함
• 누가 보더라도 쉽게 사용법을 알 수 있도록 사용자 편의성 제공

 

웹디자인기능사 필기 무료 강의