웹디자인 공부하기 I 1단계 I 필수 용어 정리하기

 

안녕하세요. 오늘은 웹디자인을 배우는 학생들이 반드시 알아야 할 핵심 용어들을 정리해 봤습니다. 저의 목표는 웹디자인을 공부하면서 포트폴리오에 적용해 보는 것까지 해보기인데요. 자 이제 저와 함께 공부 시작해 볼까요?

1. 기본개념

• UI ( User Interface ) : 사용자 인터페이스. 사용자가 웹사이트와 상호작용 하는 모든 요소를 의미함.
• UX (User Experience ) : 사용자 경험. 사용자가 웹사이트를 이용하면서 느끼는 경험과 만족도를 의미함.
• Responsive Design : 반응형 디자인. 화면 크기나 기기에 따라 자동으로 레이아웃을 제공하는 방식.
• Wireframe : 웹사이트의 기본 구조를 나타내는 스케치 도는 설계도.
• Mockup : 디자인 요소가 적용된 정적인 웹사이트 시각적 시안.
• Prototype : 실제 인터랙션을 포함한 테스트 가능한 웹사이트 모델.

2. HTML & CSS 관련 용어

• HTML ( HyperText Markup Language ) : 웹페이지의 구조를 정의하는 마크업 언어.
• CSS ( Cascading Style Sheets ) : HTML 요소의 스타일(색상, 글꼴, 레이아웃 등)을 지정하는 스타일 시트언어.
• Flexbox : CSS에서 요소들을 정렬하는 방법 중 하나로, 반응형 레이아웃에 유용함.
• Grid System : 웹디자인에서 콘텐츠를 정렬하는 격자 시스템. 12 칼럼 그리드 시스템이 대표적임.
• Media Query : CSS에서 특정 화면 크기에 따라 스타일을 변경할 수 있도록 하는 기능.
• Viewport :  사용자의 기기에서 보이는 웹페이지의 화면 영역.

 

3. 디자인 및 색상 관련 용어

• Typography : 글꼴(폰트) 및 텍스트 배치를 다루는 디자인 요소.
• White Space ( Negative Space ) : 화면에서 여백을 적절히 활용하여 가독성을 높이는 디자인 기법.
• Contrast : 색상, 밝기, 크기 등의 차이를 이용하여 시각적인 강조를 만드는 기법.
• Color Palette : 웹사이트에서  사용할 색상의 조합. 브랜드 아이덴티티에 영향을 줌.
• Accessibility : 웹사이트가 장애를 가진 사용자도 쉽게 접근할 수 있도록 디자인하는 것.
  
  

 

4. 웹사이트 구성요소

• Header : 웹페이지의 상단 부분으로, 로고, 내비게이션 바, 검색창 등이 포함됨.
• Footer : 웹페이지의 하단 부분으로, 저작권 정보, 연락처, 사이트맵 등이 포함됨.
• Nevigation Bar ( New Bar ) : 사용자가 웹사이트를 쉽게  탐색할 수 있도록 하는 메뉴 바.
• Sidebar : 웹페이지의 왼쪽 또는 오른쪽에 배치되는 보조적인 정보 영역.
• Here Image : 웹사이트의 주요 메시지를 전달하는 대형 배경 이미지.
• Call to Action ( CTA ) : 사용자가 특정 행동을 하도록 유도하는 버튼이나 텍스트 (예 :  “가입하기,”, 구매하기 “).
  
  

 

5. 웹사이드 성능 및 최적화 관련 용어

• SEO (Search Engine Optinization) : 검색 엔진에서 웹사이트의 노출을 최적화하는 기법.
• Page Load Speed : 웹페이지가 로드되는 속도. 사용자 경험과 SEO에 중요한 요소임.
• Lazy Loading : 웹페이지를 처음 로드할 때 모든 이미지를 한꺼번에 불러오지 않고, 사용자가 스크롤할 때 점진적으로 로드하는 기술.
• Caching : 자주 사용하는 데이터를 임시 저장하여 페이지 로딩 속도를 높이는 기술.
• Minification : CSS, JavaScript 파일에서 불필요한 공백과 문자를 제거하여 파일 크기를 줄이는 기법.
  
  

 

6. 웹 개발 관련 용어

• Frontend : 사용자가 직접 보는 웹사이트의 UI를 개발하는 부분. (HTML, CSS, JavaScript 사용)
• Backend : 서버에서 데이터를 처리하고 웹사이트 기능을 구현하는 부분. (Python, Node.js, PHP 등 사용)
• CMS (Content Management System) :  코딩 없이 웹사이트를 관리할 수 있도록 해주는 시스템. (예 : WordPress)
• API (Application Programming Interface) : 프로그램 간의 데이터를 주고받을 수 있도록 하는 인터페이스.
• SSL (Secure Sockets Layer) : 웹사이트의 보안을 강화하는 인증서 ( https://로 시작하는 사이트).

이 용어들을 충분히 익히고 나면, 실습을 통해 웹디자인의 기본을 다질 수 있을 겁니다 :)