웹 디자이너 용어: 고객을 위한 가이드

게시 됨: 2019-11-09

모든 거래에는 고유한 용어가 있습니다. 웹 디자이너는 UX, CSS 및 HTML과 같은 웹 사이트 용어의 알파벳 수프에 능숙합니다. 하지만 당신의 고객은? 그들에게는 그리스어일 수도 있습니다.

디자인 프로세스에 뛰어들기도 전에 가장 일반적인 웹 디자인 용어에 대해 클라이언트를 교육하면 큰 이점이 있습니다. 지식 수준에 관계없이 기본 사항을 건너뛰면 작업 및 디자인 아이디어에 대해 논의하는 대신 용어를 번역하는 전화 통화에 더 많은 시간을 소비하게 됩니다.

클라이언트가 속도를 높일 수 있도록 가장 일반적인 웹 디자인 용어를 모아 클라이언트 친화적인 용어로 번역했습니다.

다음은 7가지 필수 웹사이트 디자인 용어입니다.

  • 영웅 이미지
  • UX
  • 와이어프레임
  • 정보 아키텍처
  • 모바일 대응
  • HTML, CSS 및 자바스크립트
  • CMS


영웅 이미지

웹 사이트를 디자인할 때 웹 사이트의 홈 페이지와 관련하여 "영웅 이미지"라는 용어를 자주 듣게 됩니다. 이 용어는 배트맨과 슈퍼맨의 이미지를 떠올리게 할 수 있지만 디자이너가 웹사이트에 슈퍼히어로 이미지를 게시한다는 의미는 아닙니다.

웹사이트의 주요 초점이 되는 영웅 이미지(상단)가 있는 웹사이트의 삽화가 있는 스케치
히어로 이미지는 웹사이트 홈페이지 상단에 있는 큰 이미지 또는 동영상입니다.

히어로 이미지는 웹사이트 홈페이지 상단에 있는 큰 이미지 또는 동영상 배경입니다. 사람들은 이 지역을 영웅 이미지라고 부르기 시작했습니다. 사이트의 중요한 부분이기 때문입니다. 방문자가 웹사이트를 방문할 때 가장 먼저 보게 되는 것은 디자인이므로 매력적이고 의미가 있어야 합니다.

"영웅 이미지"라는 용어에는 이미지라는 단어가 포함되어 있지만 웹 사이트의 이 섹션은 반드시 정적인 그림일 필요는 없습니다. 오늘날 영웅 비디오는 매우 일반적이며 일반적으로 일부 텍스트 뒤의 배경에서 재생됩니다. 사이트의 목표와 디자인 스타일에 따라 사이트의 이 영역에서 사용된 애니메이션을 볼 수도 있습니다.


UX 또는 사용자 경험

UX는 사용자 경험의 줄임말입니다. 일부 웹 디자이너는 UX 디자인을 전문으로 합니다. 즉, 웹사이트 방문자의 웹사이트 전체 경험을 향상시키는 과정입니다. UX 디자인은 디자이너가 단순히 사이트의 모양을 만드는 것이 아니라 방문자가 사이트를 처음(및 이후) ​​방문하는 방식을 고려하기 때문에 전문 분야로 간주됩니다.

사용자 경험에 대한 간단한 비유는 새로운 레스토랑에서 경험할 수 있는 경험과 비교하는 것입니다. 음식은 훌륭할 수 있지만 레스토랑이 당신을 앉히는 데 영원히 시간이 걸리고 욕실이 끔찍하고 주차가 악몽이라면 아마도 다시 거기에 갈 것입니다. 레스토랑에서의 경험에 영향을 줄 수 있는 음식보다 더 많은 요소가 있습니다.

웹사이트에 대해서도 마찬가지입니다. 이것이 바로 사용자 경험의 전부입니다. 방문자의 관심을 끌고 웹사이트를 유지하는 것은 단순히 멋진 디자인을 만드는 것이 아닙니다. UX 디자인을 이해하는 웹 디자이너는 사이트의 모든 것이 사용자의 전반적인 경험에 미치는 영향을 고려합니다.


와이어프레임

대부분의 웹 사이트 프로젝트에서 웹 팀은 디자인 목업을 만들기 전에 먼저 웹 페이지의 와이어프레임을 만듭니다.

와이어프레임은 기본적으로 청사진이며 페이지에서 특정 요소와 텍스트가 배치될 위치를 보여줍니다.

웹 사이트의 대략적인 레이아웃을 보여주는 그림입니다. 로고의 위치를 ​​표시하는 원이 있고 섹션과 이미지의 위치를 ​​표시하는 상자, 텍스트의 위치를 ​​표시하는 파선이 있습니다.
와이어프레임은 페이지에서 특정 요소와 텍스트가 배치될 위치를 보여주는 청사진입니다.

웹사이트를 구축하는 것은 집을 짓는 과정과 비슷합니다. 건축가와 함께 시작하여 인테리어 디자이너가 작업을 시작하기 전에 청사진을 만듭니다. 그렇지 않으면 부엌에 욕실이 생길 수 있습니다. 와이어프레임은 웹 전략가 또는 디자이너와 협업하고 디자인 목업보다 더 쉽게 물건을 이동할 수 있게 해주기 때문에 매우 유용한 도구입니다.

와이어프레임의 예를 본 적이 있다면 건물 청사진과 유사하다는 것을 알 수 있습니다. 와이어프레임은 일반적으로 요소가 배치될 위치를 표시하는 기본 상자와 윤곽선이 있는 흑백입니다.


정보 아키텍처(IA)

와이어프레임 외에도 일반적으로 프로세스 초기에 웹 사이트의 정보 아키텍처에 대해 작업합니다. 종종 IA라고 하는 정보 아키텍처는 웹 사이트의 콘텐츠를 구성하고 우선 순위를 지정하고 레이블을 지정하는 프로세스를 나타냅니다.

이 단계에서 웹사이트의 상단 탐색에 포함할 웹사이트 페이지와 콘텐츠 구성 방식을 결정합니다. 상단 탐색은 페이지 상단에 있는 일련의 링크입니다. 이 상단 탐색은 웹사이트의 모든 페이지에 있으며 웹 방문자를 가장 중요한 콘텐츠로 안내하는 데 도움이 됩니다.

와이어프레임과 유사하게 최종 정보 아키텍처는 웹사이트의 조직 표현입니다. 종종 다이어그램처럼 보이며 최종 웹 사이트가 탐색하기에 논리적이고 직관적인지 확인하기 위해 웹 팀을 안내하는 중요한 도구입니다.


모바일 대응

오늘날 모든 웹사이트는 휴대폰, 태블릿, 데스크톱 컴퓨터와 같은 다양한 장치에서 작동해야 합니다. 이러한 맥락에서 웹 디자이너가 "모바일 반응형"이라는 용어를 사용하는 것을 자주 듣게 될 것입니다.

모바일 반응형이란 플랫폼 자체에 이미 기술이 내장되어 있다는 의미입니다.

WordPress와 같은 웹 사이트 플랫폼의 대부분은 모바일 반응형입니다. 즉, 콘텐츠가 사용자의 장치 크기에 자동으로 조정되도록 플랫폼 자체에 이미 기술이 내장되어 있습니다.

휴대 전화가 어떻게 작동하는지 생각해보십시오. 휴대폰을 가로로 돌리면 휴대폰의 내용이 자동으로 조정됩니다.

이것은 웹사이트에서 일어나는 일과 매우 유사합니다. 모바일 반응형 기술 덕분에 웹 디자이너와 개발자는 더 이상 소형 장치용 웹사이트의 두 번째 버전을 만들 필요가 없습니다. 동일한 콘텐츠와 디자인이 다양한 기기 크기에서 적절하게 표시됩니다.

숙련된 웹 디자이너는 사이트를 디자인할 때 이를 고려하고 모바일 장치와 더 큰 화면 모두에서 작동하는 콘텐츠를 작성하도록 안내할 수 있습니다.


HTML, CSS 및 자바스크립트

이러한 기술 용어가 귀하를 위협하게 하지 마십시오. 각각은 정적 이미지에서 라이브 인터랙티브 웹 페이지로 디자인이 진행되는 방식과 관련이 있습니다. 일반적으로 사이트의 모양과 구성을 전문으로 하는 웹 디자이너와 함께 웹 사이트를 만들기 시작합니다. 그런 다음 사이트를 코딩할 웹 개발자 또는 개발 팀과 협력합니다.

사이트 구축의 개발 단계에서 이러한 용어를 더 많이 듣게 되지만 디자인 토론에서도 나타날 수 있습니다.

HTML 은 HyperText Markup Language의 약자이며 웹 팀이 웹 브라우저에 텍스트 조각을 표시하는 방법을 지시할 수 있도록 합니다. HTML은 다른 태그를 사용하여 텍스트가 표제, 부제목 또는 단락인지 여부를 나타냅니다. 디자인에서 H1으로 디자이너 레이블 제목을 볼 수 있습니다. 이것은 이 레이블이 있는 모든 텍스트가 동일한 글꼴 크기여야 함을 브라우저에 알리는 데 사용되는 HTML 태그를 참조합니다.

CSS(Cascading Style Sheets) 는 웹 디자이너와 개발자가 웹사이트의 모양과 느낌을 정의하는 데 도움이 됩니다. HTML 자체는 매력적이지 않거나 매력적이지 않습니다. CSS는 아름다운 웹 페이지 디자인을 만드는 데 있어 모든 차이를 만듭니다.

JavaScript 는 개발자가 웹 사이트에서 상호 작용을 만드는 데 사용하는 스크립팅 언어입니다. HTML과 CSS만 있으면 멋진 웹 페이지를 만들 수 있지만 이 둘만으로는 아무 일도 일어나지 않습니다. 웹 개발자나 개발 팀을 찾을 때 JavaScript보다 훨씬 더 많은 것을 알고 있는 사람을 찾고 팀이 사이트를 구축하는 플랫폼에서 경험이 있는지 확인하십시오.


CMS

CMS라고도 하는 콘텐츠 관리 시스템이라는 아주 쉬운 용어로 마무리하겠습니다. WordPress(또 다른 콘텐츠 관리 시스템)와 관련하여 이 용어를 자주 듣게 될 것입니다.

실제로 WordPress는 세계에서 가장 인기 있는 콘텐츠 관리 시스템입니다. CMS는 웹사이트의 백엔드 도구이며 이를 통해 사이트에 콘텐츠를 쉽게 편집하거나 추가할 수 있습니다.

WordPress와 같은 CMS에서 사이트를 구축할 때의 큰 이점은 웹 사이트가 시작된 후 텍스트를 변경하거나, 이미지를 추가하거나, 페이지를 추가하기 위해 웹 디자이너나 웹 개발자가 될 필요가 없다는 것입니다. 페이지에 쉼표를 추가해야 할 때마다 웹 개발자에게 전화할 필요가 없습니다.

WordPress는 매우 유연하고 사용자 정의가 가능하기 때문에 비즈니스에서 여전히 쉽게 관리할 수 있는 아름다운 웹 사이트를 통해 두 가지 장점을 모두 누릴 수 있습니다.


더 많은 워드프레스 콘텐츠를 확인하세요!

local-wordpress-development-environment-why-large

WordPress는 세계에서 가장 인기 있는 콘텐츠 관리 시스템이며 매일 점점 더 많은 창작자들이 사용하고 있습니다. 여기에서 WordPress에 대해 자세히 알아보세요. 초보자이거나 WordPress를 잘 알고 있는지 여부는 중요하지 않습니다. 모든 사람을 위한 리소스와 기사가 있습니다!

여기에서 계속 읽으십시오.