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

게시 됨: 2024-09-15

모든 거래에는 고유한 용어가 있습니다. 웹 디자이너로서 당신은 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는 매우 유연하고 사용자 정의가 가능하므로 비즈니스 관리가 쉬운 아름다운 웹사이트를 통해 두 가지 장점을 최대한 활용할 수 있습니다.


더 많은 WordPress 콘텐츠를 확인해 보세요!

지역-워드프레스-개발-환경-이유-큰

WordPress는 세계에서 가장 인기 있는 콘텐츠 관리 시스템이며 매일 점점 더 많은 창작자들이 사용하고 있습니다.

여기에서 WordPress에 대해 자세히 알아보세요. 초보자이거나 WordPress를 잘 아는지 여부는 중요하지 않습니다. 우리는 모두를 위한 리소스와 기사를 제공합니다!

여기를 계속 읽어보세요.