[HTML] 웹디자인 공부

(2023-11-23: 웹디자인과 관련된 내용들만 써놓음. 아직 자세히 정리하진 않음 )

웹 디자인이란? 

웹 디자인의 정의 : 웹디자인이란 인터넷 웹사이트를 목적에 맞게 디자인하고 구축 및 관리를 하는 것 
  - 웹사이트의 외관,레이아웃, 콘텐츠까지도 웹디자인의 작업에 포함이 됨 
  - 외관: 사용된 색상, 글꼴 및 이미지와 관련 
  - 레이아웃: 정보가 구조화되고 분류되는 방법 
  - 디자인: 단순히 심미적인 것 뿐만 아니라 사용자의 경험 측면에서 편의성 및 쾌적함을 제공해야 함 

반응형/적응형 웹 디자인
  (1) 반응형 웹 디자인 (Responsive web design, RWD): 디스플레이의 종류에 따라 콘텐츠의 화면 크기가 자동으로 변함 
  (2) 적응형 웹 디자인 (Adaptive Web design, AWD): 웹사이트 콘텐츠가 일반적인 화면 크기와 일치하는 레이아웃 크기로 고정 

웹디자인 기초 -

디자인 구성 원칙 

1. 웹사이트의 목적
2. 단순성 

2. 단순성
  2.1 색상:
   - 너무 많은 색상을 사용하지 말 것. 색상 선택을 최대 5가지 색상으로 유지
   - 보색이 이상적 
  2.2 타이포그라피 
   - 웹사이트에서 글꼴을 읽을 수 있어야 하며, 최대 3개의 다른 글꼴로 제한 
   - 폰트는 가독성이 쉬워야 하며, 폰트의 색상 역시 최소한으로 유지하고 눈에 잘 띄도록, 배경색과 대비되는 색으로 선택

33. 일관성 유지 
   - 전체적인 외관과 느낌, 즉 "Look and feel"이 웹사이트 내의 모든 페이지에서 비슷해야 함 
   - 배경, 컬러, 서체 심지어 글의 어조꺼지 일관성을 유지해야 함. 

 

웹 디자인의 구성요소 

1. 레이아웃 
- 페이지의 요소 배치 방식
- 이미지, 텍스트, 탐색 등을 위한 기초 
- 어떤 레이아웃으로 웹사이트를 구성할 것이냐 --> 디자인 요소 
- 문자, 기호, 일러스트레이션, 이미지 등의 구성요소를 효과적으로 배치하여 전달력, 가독성, 주목성, 심미성 등을 높임 

1.1 레이아웃 디자인이란: 웹 사이트가 어떻게 구성된는지에 대한 디자인 
- 기본적으로 웹사이트의 청사진이라 생각할 수 있음 
- 사진, 텍스트, 로고 등 모든 리소스가 어디에 있을지를 계획함 
- 웹사이트 디자인에서 가장 중요한 요소: 소비자의 간편함과 쉬운 탐색 
- 사이트의 모든 리소스를 사용자에게 간단한 방식으로 전달할 수 있는 레이아웃을 선택해야 함

1.2 다양한 레이아웃 

1.2.1 F자형 
- 가장 인기있는 웹사이트 레이아웃 
- 사람들이 일반적으로 읽을 때, 기본적으로 F자 모양 또는 E 패턴으로 읽는 경향이 있음 
-  페이지를 디자인하기 전에 콘텐츠의 우선순위를 정하고 사용자에게 소개하고 싶은 중요한 정보를 F자형의 위쪽에 먼저 배치 
- 다양하고 많은 정보를 전달하기보다는 광고를 포함하거나 유저들의 참여를 필요로 하는 웹페이지에 매유 유용 
- 해당 패턴은 쉽게 지루하게 느껴진다는 단점이 있음 
- 

1.2.2 Z 자형 
- 사용자의 읽기 습관과 관련이 있는 패턴 
- 해당 패턴은 텍스트가 적고, 독자가 어떤 반응을 할지 명확히 예상이 가능할 때, 적합 
- 한눈에 들어오기 때문에 유저가 페이지의 핵심에 빠르게 반응하도록 만들어준다는 장점도 있음 

1.3 잡지형
- 해당 레이아웃은 미디어 출판물에서 가장 많이 사용됨 
- 그리드 배치를 기반으로 하며 사용자에게 콘텐츠 로드를 과부하 없이 제공하는 것이 특징 
- 장점-1: 웹 페이지의 계층 구조를 쉽게 파악할 수 있다는 장점. 
   장점 -2: 더 중요한 글이나 최근 글을 쉽게 파악가능하며, 페이지를 스캔하고 다른 컨텐츠에 집중할 수 있음 
- 잡지 스타일의 레이아웃의 경우, 헤드라인 뿐만 아니라, 이미지에도 크게 의존하므로 썸네일 이미지에 신경을 써야 함

1.4 썸네일 그리드  
- 해당 레이아웃은 다양한 컨텐츠를 강조하는 블로그 및 뉴스 웹사이트에 적합함 

1.5 삼등분의 법칙
 - 가장 많이 사용되는 패턴 중 하나
- 수평과 수직 방향으로 화면을 삼등분하여 총 9개의 구역을 나눔 (상중하, 좌중우) 
- 해당 분할을 통해 중요한 부분이 좀 더 명확해지는 효과를 얻을 수 있음 

2. 시각적 계층 구조 
- 

2. 타이토그래피 
  - type과 graphy의 합성어로 문자를 이용한 디자인을 의미 
  - 글자 및 글꼴, 가독성을 포함하고 그것에서 보여지는 조형적인 부분을 의미함 
  - 타이포 그래피의 구성 요소; 
    글 자체의 선정 및 글자 크기 
    글자 위치/ 글자 간격/ 줄간격/ 각 줄의 길이 

3. 글꼴 
대표적인 글꼴체 
  - 명조체: 바탕체, 본문 기본서체, 여성적이고 섬세함, 우아한 폰트 
  - 고딕체: 돋움체, 남성적이며 힘이 있는 서체 
  - 산세리프체: 돌기가 없는 서체 

UX/UI 디자인의 기본

UX란: 사용자 인터페이스(UI) 디자인 또는 사용성과 같은 의미로 사용되는 경우가 많음 

1. 사용자는 웹페이지를 읽지 않는다. 대신 흝어본다. 
   - 직관적인 단어 및 디자인을 사용해야 함 
   - 웹이란 그저 도구이고 유저가 원하는 정보를 찾기 위해 돌아다닌 공간. 따라서, 유저는 원하는 정보를 찾기 위해 모든 정보를 읽을 필요성을 느끼지 않음 
   --> 사용자가 딱 보고 알만한 사이트를 만들어야 함. 
    (1) 사용자가 찾던 것을 쉽게 발견 
    (2) 우연히 유입된 사용자가 필요한 정보를 찾고도 더 장시간 머물게 됨 
    (3) 노출되기를 바라는 콘텐츠 쪽으로 사용자를 유도할 가능성이 커짐 

좋은 사이트를 만들기 위한 UX 디자인 팁 

(1) 관례를 이용하라: 서치바, 동영상 재생 버튼과 같이 널리 사용되어 표준화된 패턴을 의미 
 - 혁신도 좋지만, 관례를 무시해선 안된다. 관례는 이미 유저의 선택을 받아 일정부분 표준화가 된 것이기 때문에, 유저의 편의성을 증대시킬 수 있다. 
 - 관례를 사용하지 않는다면, 두 가지 조건 중 최소한 하나를 충족시키는지 확인
   a. 사람들이 별도로 익히는 수고를 하지 않아도 도리 정도로 명확하거나 설명없이도 이해할 수 있어서 관례만큼 좋은 것
   b. 익히는 수고를 약간 들이더라돌 그만큼의 가치가 있는 것 '

2. 시각적 계층구조를 효과적으로 구성하라 
 - 더 중유한 부분이 눈에 띄도록 하자 
   -- 글씨의 크기, 굵기를 조절하거나 여백의 비중을 통해 내용의 중요도를 구분할 수 있음 
 - 요소 간 논리적인 연계를 시작적으로 표현

3. 페이지의 구역을 또렷하게 구분하라. 
 - Z 패턴, F 패턴 등 유저의 시선의 흐름에 따라 중요도 순으로 전달하고자 하는 내용을 배치하는 것이 효과적 
 - 내가 전달하고 싶은 메시지를 고아고 영역과 같은 영역에 두는 우를 범하지 말아야 함 
 - 사용자는 필요한 곳만 판단하여 본다 

4. 클릭할 수 있는 요소를 명확히 표시하라 
 - 유저가 원하는 것을 내가 보여주고 싶은것을 찾기도 전에 이탈하지 않게 하려면 누구나 알아볼 수 있도록 쉽고 명확하게 디자인해야 함 
 - 클릭할 수 있는 영역이 아닌 곳을 클릭 영역과 유사한 스타일로 디자인 X 

5. 주의를 흩뜨릴 만한 요소를 없애라 "
  a. 시끄러움: 모든 영역의 모든 요소가 폰트를 달리하고 색깔을 달리하고 움직이면서 나를 봐달라 소리칠 것 같ㅇ느 페이지는 유저에게 피로감을 줌 
  b. 무질서: 
  c. 어수선함: 

5. 내용을 흩어보기 좋은 방식으로 구성하라 
  흩어보기에 좋은 페이지의 조건 
  a. 제목을 많이 넣어라 
  b. 단락의 길이를 짧게 유지하라 
  c. 불릿 목록을 사용하라 
  d. 주요 용어를 강조하라 

웹 네비게이션이 필요한 이유 
  1. 규모/방향/위치 감각이 없다 
     - 계층관계에 대한 표기가 없다면 유저는 웹페이지에 자신이 어디있는지 알 수 없음. 따라서, 이런 문제를 해결하기 위해, 필요한 것이 웹 네비게이션 
   2. 계층구조를 나타내는 내비게이션 자체로 이 사이트에 어떤 콘텐츠가 있는지 쉽게 알 수 있음 
   3. 그 자체로 사이트 맵의 역활을 하여 사이트 이용방법을 쉽게 알 수 있음 

웹 디자인의 기능적 구성 요소 

1. 사이트 기능에 미치는 웹 디자인의 구성 요소 
   - 내비게이션 
   - 속도 
   - SEO 
   - UX 
   - 적응형/반응형 웹 디자인 

웹 네비게이션 디자인 

  웹 네비게이션 디자인을 위한 팁 
   - 기본 탐색 구조를 단순하게 유지 (추천위치: 페이지 상단 부근) 
   - 사이트 최하단부에 내비게이션 바를 포함 
   - 모든 페이지에 브레드크럼을 사용하는 것을 검토함 
   - 사이트 상단에 검색창을 포함하면 방문자가 키워드로 검색할 수 있음 

  1. Persistent Naviagation (Global Navigation) 
    - 페이지를 이동해도 항상 고정된 자리에 존재하는 웹 내비게이션 
    - UX/UI 디자인적으로 일관성을 유지하여 유저에게 편의를 제공함 
  2. 페이지 이름 
    - 모든 페이지는 이름이 있어야 함 
    - 이름의 위치가 적절해야 함. 
    - 이름은 눈에 띄어야 함 --> 계층 구조상 이 페이지가 맨 위임을 분명하게 알게 함 
  3. 현재의 위치 표시 
    - 지금 유저의 위치를 분명하게 알 수 있도록 해줘야 함 
    - 미묘한 강조가 아닌 누가 봐도 눈에 띈다는 느낌을 받을 수 있는 디자인이어야 함 
  4. 빵 부스러기 
    - 웹에서도 내가 어떤 경로를 통해 이 페이지에 흘러들어왔는지를 보여주는 효과 
    - UX/UI 디자인적으로 볼 때, 유저가 스스로 사용법을 알 수 있는 최적의 방법 
      a. 공간을 많이 차지 하지 않음
      b. 상위 단계로 거슬러 올라가기, 홈으로 가기처럼 유저가 가장 자주 사용하는 두가지 행동을 편하게 할 수 있는 일관성 제공 
    - 적용 방법 
      a. 맨꼭대기에 두어라 
      b. 각 단계 사이에 > 기호를 넣어라 
      c. 마지막 항목의 서체를 볼드체로 표시하라. 

UX/UI 디자인 측면에서 전체적인 그림을 보여줘야 함: 유저에게 다음 5가지의 질문을 할 수 있어야 함 
  1. 이게 무슨 사이트이지 
  2. 이 사이트에서 무엇을 할 수 있지 
  3. 이 사이트에는 무슨 내용이 담겨 있는 거지 
  4. 어디서부터 봐야 하지  
  5. 비슷한 다른 사이트가 있음에도 내가 이 사이트를 이용해야 할 이유가 뭐지 

사이트 디자인에 따라 다음 메뉴 유형에서 선택할 수 있음 [5] 
  1) 클래식 내비게이션 메뉴: 자주 사용하는 메뉴 유형 
   - 네비게이션 메뉴는 사이트의 헤더에 배치되며 가로 형태의 목록으로 표시  
  2) Sticky 메뉴 
   - 방문자가 사이트를 아래로 스크롤해도 메뉴가 표시됨 
  3) 햄버거 메뉴 
   - 세 개의 가로줄로 구성된 아이콘을 의미하며, 클릭하면 전체 메뉴가 열림 
  4) 드롭 다운 메뉴 
   - 방문자가 항목 중 하나를 클릭하거나 마우스를 가져가면 추가 항목 목록이 열리는 메뉴 
  5) 사이드바 메뉴 
   - 웹페이지의 왼쪽 또는 오른쪽에 있는 메뉴 항목의 목록 

SEO
  - 검색 엔진 최적화 (SEO): 검색 엔진에서 순위가 상위에 매겨지도록 웹사이트를 최적화하는 과정 

웹 디자인의 시각적 요소 

1. 웹사이트 헤더 (header) 
- 페이지의 맨 위 섹션을 표시되는 곳으로, 방문자가 사이트에 도착했을 때 가장 먼저 보게되는 요소 
- 헤더는 일반적으로 내비게이션 메뉴, 상호, 로고, 또는 연락처 정보를 표시하는데 사용 

2. footer 
- 페이지의 가장 하단에 있으며, 사이트의 모든 페이지에 고정되어있음 
- 연락처 세부정보, 지도, 전자 메일 들옥 모음 등을 포함하는 일반적인 장소 

3. 색상 배색 

4. 타이포 그래피 

5. 웹사이트 배경 

유용한 웹디자인 팁 [6]
1. 우선 순의를 표현하려면, 사이즈가 아닌 색깔과 굵기를 활용 
- 흔히 저지르는 실수: 우선 순위를 표현하기 위해 지나치가 많은 사이즈의 폰트를 사용하는 것 
- 모든 작업을 폰트 사이즈로 해결하는 것이 아닌, 색깔이나 폰트의 굵기를 사용하면 동일한 효과를 얻을 수 있음 
- 글의 제목과 같은 중요한 텍스트에 대해서는 검은색 말고, 짙은 색 컬러를 사용하는 것도 좋음 
- 작성한 날짜와 같은 부차적인 텍스트에 대해서는 회색
- 페이지 아랫 부분에 있는 저작권 정보와 같은 덜 중요한 내용에 대해서는 옅은 회색 
- 일반적인 텍스트에 대해서는 약 400-500 정도의 일반적인 굵기의 폰트가 적절함. 
- UI 작업을 할 시, 400 이하의 가는 굵기는 사용하지 말 것: 가는 굵기의 폰트는 크기가 작은 텍스트에서는 읽기 힘들어짐
- 강조를 하고 싶은 텍스트에 대해서는 600-700정도의 굵은 폰트가 어울림 

2. 컬러가 있는 배경에 대해서는 회색 텍스트를 사용하지 않는다. 
- 배경이 흰색일 때, 덜 강조해도 되는 텍스트에 옅은 회색을 사용하는 것은 좋은 방법 
 - 배경에 컬러가 있는 경우에 회색 텍스트를 사용하게 될 경우, 대비효과가 줄어든 것으로 보이는 효과가 있음 

3. 음영의 오프셋을 조절함 

4. 경계선을 적게 사용함 

6. 웹 디자인이 밋밋하다면 컬러가 있는 경계선을 사용하여 강조함 
- 경고 메시지, 네비게이션 등에 활용 가능

7. 모든 버튼이 컬러를 가지고 있지 않아도 된다. 

 

도움이 되는 사이트들 

1. GDWEB: https://www.gdweb.co.kr/main/    
   - 웹/모바일 디자인 우수작품들을 선정 및 발표하고 이를 영구 보존하는 국내사이트 
2. Behance: https://www.behance.net/   
   - Adobe 계열의 포트폴리오 공유 서비스 
   - 세계에서 가장 큰 규모의 크리에이티브 커뮤니티 
3. Dribbble: https://dribbble.com/    
4. Awwwards: https://www.awwwards.com/    
5. SiteInspite: https://www.siteinspire.com/     

Appendix: 게슈탈트 법칙 [7][10]  
- 사람들은 사물의 개별적인 부분을 인식하기 전 사물 전체를 보는 경향이 있으며, 이는 무의식적으로 이루어짐 
- 웹디자인의 경우, 사람들은 머리글, 메뉴, 바닥글 등을 구분하기 전에 전체적인 웹사이트를 먼저 살펴봄 
- 8가지 법칙 
(1) 근접의 법칙: 자연스럽게 서로 가까이 있는 것들을 함께 묶어서 하나로 인식 
   -- 웹디자인과 관련된 구성요소 (네비게이션, 바닥글 등)를 함께 그룹화하여 해당 구성요소가 전체를 형성하고 있음을 알림 
(2) 유사성의 법칙: 비슷한 모양, 색상, 음영 등을 함께 묶어서 인식
(3) 폐쇄의 법칙: 닫히지 않은 모양이나 그림의 일부가 사라지면, 우리의 인식은 이러한 시각적인 차이를 매꿈 
(4) 대칭의 법칙: 물체를 대칭으로 나누어 인식함 
(5) 공동운명의 법칙: 물체를 길을 따라 움직이는 선으로 인식하는 경향이 있음. 따라서 같은 경로에 있는 물체들을 함께 그룹화함
(6) 연속성의 법칙: 사람들은 선을 정해진 방향이 계속 진행되는 것으로 인식하는 경향이 있음 

Apple Human Interface Guideline vs Google Material Design system [8] 

포트폴리오 웹 디자인을 위한 기본 [13]
(1) 낡은 기술은 버려라
(2) AJAX를 사용
(3) 중요 컨탠츠는 강조 
(4) 무거운 이미지를 최적화시킬 도구 활용 
(5) 내비게이션은 심플하게 유지 
(6) 반응형 디자인을 고려 
(7) SEO 기본에 충실 

Reference: 
[1] https://media.fastcampus.co.kr/knowledge/uiuxdesign-basic-3/   
[2] https://appmaster.io/ko/blog/juyo-web-dijain-weoncig   
[3] https://www.elancer.co.kr/blog/view?seq=26    
[4] https://designbase.co.kr/webdesign-4/    
[5] https://ko.wix.com/blog/post/web-design    
[6] https://blog.wishket.com/%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%84-%EC%A0%84%EB%AC%B8%EC%A0%81%EC%9C%BC%EB%A1%9C-%EB%AA%B0%EB%9D%BC%EB%8F%84-%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8/    
[7] https://cucat.tistory.com/entry/%EA%BC%AD-%EC%95%8C%EC%95%84%EC%95%BC%ED%95%A0-%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8-%EA%B8%B0%EC%B4%88-%EC%9B%90%EC%B9%99-6%EA%B0%80%EC%A7%80#google_vignette   
[8] https://brunch.co.kr/@jaehyun-design/23  : 디자인과 관련되서 좋은 글들이 많은 것 같다. 
[9] https://mesign.tistory.com/45  웹페이지의 버튼과 관련된 내용 
[10] https://ditoday.com/%EA%B2%8C%EC%8A%88%ED%83%88%ED%8A%B8-%EC%9D%B4%EB%A1%A0%EC%97%90-%EA%B8%B0%EB%B0%98%ED%95%9C-ui-%EB%94%94%EC%9E%90%EC%9D%B8/    
[11] https://brunch.co.kr/@outlines/43: 애플이 UI 디자인 분석 
[12] https://brunch.co.kr/@hailey-hyunjee/37   
[13] https://designlog.org/2512458#.Ut4KlxDV8eN    
[14] https://mini-sugar.tistory.com/44 반응형 레이아웃과 관련 
[15] https://knulab.com/archives/1153  반응형 레이아웃과 관련  
[16] https://chaeyeon-chaeyeon.tistory.com/22  
"[17] https://yeon-design.tistory.com/28