웹 디자이너라면 꼭 알아야 할 필수 용어 정리

---

웹 디자이너라면 꼭 알아야 할 필수 용어 정리

디자인만 잘하면 끝? NO! 웹 환경 이해는 필수입니다.

웹 디자이너로 일하다 보면 종종 개발자와 소통하면서 “OG 태그 추가됐나요?”, “퍼블리싱은 반응형 기준인가요?” 같은 말을 듣곤 합니다. 이럴 때 고개만 끄덕이면서도 속으로는 “OG 태그가 뭐지…?” 하는 경우, 한 번쯤 있으셨죠?

웹 환경과 밀접하게 연결된 디자인 업무에서는 관련 용어를 정확히 이해하는 것이 커뮤니케이션 능력과 작업 효율을 높이는 핵심입니다.

오늘은 실무에서 꼭 알아야 할 웹 디자이너 필수 용어를 쉽게 정리해 드립니다.

---

📌 1. OG Tag (Open Graph Tag)

• 설명: 웹 페이지를 SNS에 공유할 때, 보이는 제목, 설명, 이미지 등을 제어하는 메타 태그입니다.
• 예시: 카카오톡, 페이스북 링크 공유 시 썸네일 이미지가 뜨는 것도 OG 태그 설정 덕분입니다.
• 관련 코드 예시:

---

📌 2. Favicon

• 설명: 브라우저 탭에 표시되는 작은 아이콘입니다. 브랜드 인지도를 높이는 데 필수 요소입니다.
• 파일 형식: 보통 .ico, .png, .svg를 사용합니다.

---

📌 3. Responsive Design (반응형 디자인)

• 설명: 다양한 디바이스(PC, 태블릿, 모바일)에 맞게 화면이 자동으로 조정되는 디자인 방식입니다.
• 실무 Tip: Figma에서는 Frame 사이즈별로 반응형 테스트를 해보세요!

---

📌 4. Hero Section

• 설명: 웹사이트 메인 페이지의 가장 상단에 위치한 강렬한 첫 화면 영역입니다. 브랜드 메시지나 주요 이벤트, CTA(Call To Action)가 주로 배치됩니다.

---

📌 5. Above the Fold / Below the Fold

• 설명:
• Above the Fold: 사용자가 페이지를 열었을 때 스크롤 없이 보이는 영역
• Below the Fold: 스크롤을 내려야 보이는 영역
• 실무 Tip: 가장 중요한 콘텐츠는 ‘Above the Fold’에 배치하는 것이 효과적입니다.

---

📌 6. CTA (Call To Action)

• 설명: 사용자의 행동을 유도하는 버튼이나 링크를 의미합니다.
• 예시: “지금 신청하기”, “무료 체험 시작” 버튼 등이 대표적입니다.

---

📌 7. Lazy Loading

• 설명: 페이지가 로드될 때 모든 이미지를 한꺼번에 불러오는 대신, 스크롤 시점에 맞춰 순차적으로 로드하는 방식입니다. 페이지 속도 향상에 매우 유리합니다.

---

📌 8. Wireframe & Prototype

• Wireframe: 구조와 레이아웃만 보여주는 스케치 형태
• Prototype: 실제 인터랙션까지 담은 동적인 화면

✅ Tip: Figma에서 Wireframe 플러그인과 Prototype 기능을 적극 활용해 보세요.

---

📌 9. Accessibility (웹 접근성)

• 설명: 장애인, 고령자 등 모든 사용자가 웹사이트를 문제없이 사용할 수 있도록 설계하는 것을 의미합니다.
• 실무 Tip: 대비가 부족한 색상, 작은 텍스트는 Accessibility 기준에 부적합할 수 있습니다.

---

📌 10. Viewport

• 설명: 사용자가 보는 웹 페이지의 가시적인 영역을 말합니다.
• 관련 코드 예시:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일 웹에서 화면이 깨지지 않도록 필수로 설정해야 합니다.

---

✅ 마무리하며

웹 디자인은 이제 단순한 비주얼 작업을 넘어, 기술적 이해와 사용자 경험을 아우르는 종합적인 역량이 요구됩니다. 위 용어들을 제대로 이해하고 활용한다면, 디자이너로서 더욱 인정받는 커리어를 쌓을 수 있습니다.

혹시 추가로 궁금한 용어가 있다면 댓글로 남겨주세요! 다음 포스팅에서 다뤄드릴게요 😊

---