모두가 알아야 할 웹 디자인 용어 10 가지

기술 분야에서 운영되는 다른 산업과 마찬가지로 웹 디자인은 유행어와 구절이 많지 않으며, 노련한 전문 가라하더라도 무엇이 무엇인지 추적하기가 어려울 수 있습니다.

돌아올 때 웹 디자인 초기 단계에 있었지만 이미 너무 많은 약어와 기술 언어 문제로 인해 모든 과장 아래에 매우 간단한 기술과 아이디어가 있습니다. 오늘날의 환경은 우리가 웹에서 사용하는 도구와 프레임 워크, 언어 및 라이브러리가 개발되고 발전함에 따라 수백 배 더 복잡합니다.



전문적인 웹 디자이너조차도 모든 다른 유행어와 기술을 파악하는 데 어려움을 겪을 수 있으므로 여기에서 모든 사람이 적어도 이해해야하는 가장 필수적인 웹 디자인 용어 10 가지를 정리했습니다. 아래 목록을 확인하고 아래 댓글에 표시되어야한다고 생각하는 내용을 놓친 경우 알려주세요.



01. HTML, CSS 및 JavaScript

웹 디자인 용어 : HTML5

HTML은 HyperText Markup Language를 의미하고 HTML5는 최신 버전입니다.

처음부터 이걸 꺼내자!



HTML

HTML은 HyperText Markup Language의 약자이며 웹 언어입니다.

간단히 말해서, HTML은 웹 디자이너가 웹 브라우저에 특정 콘텐츠를 처리하는 방법을 알려주는 방법을 제공합니다. HTML에는 디자이너가 콘텐츠를 의미 론적 의미로 마크 업하여 단락이 텍스트 사본으로 식별되고 이미지는 이미지로 가져 오는 등 다양한 태그가 포함되어 있습니다.

CSS

그러나 HTML만으로는 멋진 웹 페이지를 만들 수 없습니다. CSS (Cascading Style Sheets)는 디자이너가 웹 페이지 내의 다양한 요소가 브라우저에 의해 화면에 렌더링되는 방식을 결정하는 시각적 규칙 집합을 만드는 방법을 제공합니다.



CSS를 사용하면 텍스트 색상, 배경, 페이지의 모든 다른 부분의 크기, 모양 및 위치를 설정할 수 있습니다.

자바 스크립트

마지막으로 JavaScript는 (이름에서 알 수 있듯이) 디자이너가 웹 페이지에서 상호 작용을 만들 수있는 스크립팅 언어입니다.

역사적으로 JavaScript는 주로 양식 유효성 검사에 사용되었으며 전화 필드에 전화 번호를 입력하는 것을 잊었을 때 나타나는 성가신 경고 상자를 제공했습니다. 요즘에는 특수 시각 효과 또는 전체 페이지를 다시로드하지 않고도 새 콘텐츠를로드 할 수있는 기능을 포함하여 JavaScript에 대한 더 많은 실용적인 용도가 있습니다.

한 가지 중요한 점은 이름에도 불구하고 JavaScript는 Java 프로그래밍 언어와 전혀 관련이 없다는 것입니다.

또한 읽으십시오 :

02. 반응 형 디자인

웹 디자인 용어 : 반응 형 웹 디자인

반응 형 웹 디자인은 빠르게 모든 웹 디자인에 대한 표준 접근 방식이되고 있습니다.

반응 형 디자인의 개념에 대해 들어 본 적이 없을 것입니다. 지난 몇 년 동안 이것은 웹에서 진짜 유행어 였고, 포기할 기미가 보이지 않았습니다. 클라이언트는 디자이너로부터 반응 형 웹 사이트를 요구하기 시작했습니다. 종종 그들이 요구하는 것이 무엇인지 완전히 이해하지 못한 상태입니다!

간단히 말해서 반응 형 디자인은 사용자의 장치와 이상적인 세상에서 사용자의 컨텍스트에 맞게 조정되어 웹에 연결된 장치의 종류에 관계없이 가장 적절하고 액세스 가능한 방식으로 필요한 콘텐츠를 표시하는 디자인입니다. 그것을 보는 데 사용됩니다. 실제로 이것은 화면 크기가 줄어들거나 증가함에 따라 웹 페이지가 다시 페이지 매김되어 데스크톱 컴퓨터에서 볼 때 여러 열로 표시되지만 스마트 폰에서 볼 때는 단일 열만 표시됩니다.

반응 형 디자인의 개념은 단순히 콘텐츠 형식을 다시 지정하는 것 이상입니다. 자세한 내용은 반응 형 디자인에 대한 다음 문서를 참조하세요.

03. 시맨틱 마크 업

웹 디자인 용어 : 시맨틱 마크 업

시맨틱 마크 업은 관련 메타 데이터를 콘텐츠에 연결하는 것입니다.

시맨틱 마크 업은 콘텐츠를 설명하는 데 사용되는 마크 업 태그가 콘텐츠 자체에 대한 관련 메타 데이터도 제공하는 HTML 코딩 방식입니다. 예를 들어 페이지의 주요 콘텐츠와 관련이 있지만 페이지의 주제와는 직접적인 관련이없는 정보는.

수채화로 풍경을 그리는 법

분명한 모범 사례 방법론처럼 들릴 수 있고 웹은 확실히 의미론을 염두에두고 설계되었지만이 접근 방식을 사용하는 것이 항상 간단하지는 않았습니다.

초기

웹 초창기에는 사용 가능한 HTML 태그 수가 제한되었습니다. 존재했던 많은 태그는 본질적으로 순전히 의미 론적이었습니다.

예를 들어 태그는 단락 내용을 표시하는 데 사용됩니다.

시간이 지남에 따라 디자이너는 가장 순수한 형태로 사용할 때 허용되는 언어보다 더 정교한 레이아웃을 만들 수있는 한계를 넓히고 싶었습니다.

표 형식의 데이터를 표시하기위한 태그는 기둥 형식의 레이아웃을 만드는 데 신뢰할 수있는 솔루션을 제공하기 위해 용도가 변경되었습니다.

동시에 디자이너는 의미 상 적절한 태그를 디자인에 맞게 변경하는 대신 특정 태그의 기본 시각적 특성에 의존하여 콘텐츠에 사용한 태그를 정의하기 시작했습니다. 결과적으로 크고 굵은 텍스트가 종종 제목 (

,

,

등) 태그가 아닌 또는 -강조-태그.

연필을 잡고 그리는 방법

잃어버린 세대

그 결과 HTML의 의미 론적 특성의 상당 부분이 한 세대 동안 사라졌습니다. 비의 미적 웹의 단점은 웹 사이트의 기본 코드를 유지하거나 이해하기가 매우 어려워지고 검색 엔진이 페이지의 가장 중요한 요소를 프로그래밍 방식으로 정확하게 정의 할 수 없다는 것입니다.

고맙게도 CSS와 최신 버전의 HTML 언어가 모두 등장하면서보다 순수한 의미 론적 접근 방식으로 마크 업할 수있는 기능이 돌아 왔습니다. CSS는

태그와 같은 새로운 의미 지향 태그를 포함하도록 HTML 언어가 확장되었습니다.



04. SaaS

웹 디자인 용어 : SaSS

SaaS (Software as a Service)는 Google Docs에서 Photoshop Express까지 모든 것을 설명합니다.

혼동하지 마십시오 SASS , SaaS는 Software as a Service의 약어입니다. 간단히 말해서 클라우드에서 또는 클라우드를 통해 제공되는 소프트웨어 플랫폼을 제공하는 모든 서비스를 의미합니다.

작동중인 SaaS의 인기있는 예로는 최신 버전의 Microsoft Office online, Google Docs 및 Photoshop Express가 있습니다.

이러한 각 서비스는 사용자에게 데스크톱과 같은 경험을 제공하지만 사용자 컴퓨터에 추가 소프트웨어를 설치할 필요없이 웹에서 직접 제공됩니다.

05. A / B 테스트

A / B 테스트를 통해 다양한 버전의 웹 페이지를 시험해 볼 수 있습니다.

A / B 테스트를 통해 다양한 버전의 웹 페이지를 시험해 볼 수 있습니다.

A / B 테스트는 어떤 솔루션이 가장 효과적인지 실험을 통해 확립하는 것을 목표로 동일한 최종 결과를 달성하는 다양한 방법을 시도하는 방법론입니다.

일반적으로 A / B 테스트는 웹 페이지의 다양한 레이아웃을 시험하는 데 사용되며, 대체 레이아웃을 사용하여 유료 고객으로 전환하는 사용자 수를 추적합니다.

프로토 타이핑, 평가 및 조정의 반복적 인 프로세스를 계속함으로써 A / B 테스트는 개별 페이지의 전환율을 크게 높일 수 있습니다. 사용하기에 유용한 도구입니다. 더 나은 전환은 더 나은 대차 대조표를 의미합니다!

또한 읽으십시오 :

  • AB 테스트, 시선 추적 및 웹 사이트 최적화 도구를 사용하는 방법
  • AB 테스트를 작동시키는 데 필요한 5 가지 기술
  • 웹 앱 성공으로가는 길 : 프로토 타입 및 사용자 테스트

06. 에어

웹 디자인 용어 : ARIA

ARIA (Accessible Rich Internet Application)는 웹에 액세스 할 수 있도록 지원하는 기술을 설명합니다.

ARIA는 Accessible Rich Internet Application의 약자이며, 보조 기술 및 레이아웃에 대한 요구 사항이 다른 다양한 사람들이 웹 앱을 사용한다는 아이디어를 나타냅니다.

ARIA는 일반적으로 사용자의 요구 사항과 웹 사이트 또는 웹 앱 간의 격차를 해소하는 데 사용되는 기술을 설명하는 데 도움이되는 용어로 사용됩니다.

결과적으로 콘텐츠 및 기능의 접근성을 높이기 위해 화면 읽기 소프트웨어, 구조적 레이아웃 접근 방식 및 사용자 중심 인터페이스 디자인과 같은 디자인 방법론을 참조 할 수 있습니다. W3C는이 분야에서 완료된 작업의 대부분을 후원하며 자세한 내용은 웹 접근성 이니셔티브 ARIA 사이트 .

또한 읽으십시오 :

07. 정보 아키텍처 (IA)

웹 디자인 용어 : IA

정보 아키텍처 (IA)는 웹 사이트 구성 방식을 중심으로합니다.

정보 아키텍처 (IA)는 웹 사이트에서 콘텐츠 및 정보의 의미 론적 레이아웃을 설명하는 데 사용되는 일반적인 용어입니다. 웹 사이트 구조에서 어떤 페이지로 이동하는지, 각 페이지에 포함 된 콘텐츠, 이들 각각이 사이트 내의 다른 페이지와 상호 작용하는 방식을 다루는 정보의 구성을 나타냅니다.

한 분야로서 IA는 전환, 수익 및 / 또는 사용자 만족도를 높이기 위해 사용자가 원하는 정보를 가능한 한 쉽게 찾을 수 있도록하는 데 관심이 있습니다.

  • 또한 읽으십시오 : 웹 사이트를 계획하는 것이 집을 짓는 것과 같은 이유

08. 서버 측 스크립팅

웹 디자인 용어 : PHP

서버 측 스크립팅-PHP와 같은 언어 사용-데이터 조작이 서버에서 수행됨을 의미합니다.

웹 사이트에서 응용 프로그램 기능을 제공하는 방법에는 두 가지가 있습니다. 모든 로직과 데이터 처리가 JavaScript를 사용하는 웹 브라우저에서 처리되는 클라이언트 측과 서버에서 데이터 조작이 수행되는 서버 측입니다. 대부분의 웹 앱은이 두 가지를 결합하여 사용자의 관점에서 모든 것이 브라우저에서 처리되지만이면에서 데이터가 저장, 조작 또는 생성되도록 서버로 다시 전송됩니다.

Mac 음악 제작을위한 최고의 외장 하드 드라이브

서버 측 스크립팅은이 서버 측 데이터 조작을 프로그래밍하는 데 사용되는 언어를 설명하는 일반적인 용어입니다. PHP 및 ASP.NET과 같은 스크립팅 언어는 웹 개발자가 데이터베이스와 상호 작용하고 복잡한 데이터 작업을 수행하고 브라우저에 정보를 다시 제공 할 수있는 정교한 비즈니스 논리를 만드는 간단한 방법을 제공합니다.

처리가 서버에서 수행되기 때문에 사용자의 웹 브라우저는 최소한 사용자의 관점에서 보면 성능을 향상시키기 위해 열심히 작업 할 필요가 없습니다.

09. 시각적 계층 구조

웹 디자인 용어 : 시각적 계층

시각적 계층은 디자인 요소를 배열하여 다른 요소보다 일부를 강조하는 것을 의미합니다.

이것은 웹 디자인에만 국한된 것이 아니라 웹 페이지의 디자인과 레이아웃을 언급 할 때 점점 더 많이 사용되고 있으므로 상위 용어 목록에 추가했습니다. 간단히 말해, 시각적 계층은 가장 중요한 요소가 더 강조되는 것처럼 보이도록 페이지의 디자인 요소 배열을 나타냅니다.

이러한 강조는 일반적으로 크기, 색상, 글꼴 및 그림자와 같은 특수 효과를 사용하여 이루어집니다. 시각적 계층 구조는 종종 정보 아키텍처 프로세스의 결과로 의식적인 결정입니다.

10. 무한 / 시차 스크롤

무한 스크롤과 시차 스크롤은 점점 인기를 얻고있는 두 가지 관련 기술입니다.

무한 스크롤과 시차 스크롤은 점점 인기를 얻고있는 두 가지 관련 기술입니다.

무한 스크롤과 시차는 별개의 두 가지이지만 종종 함께 보이므로 여기에 함께 패키지화했습니다.

무한 스크롤링은 현재 사이트를 표시하는 트렌디 한 방법이므로 콘텐츠를보기 위해 별도의 페이지를로드하는 대신 모든 페이지 콘텐츠를 스크롤하여 다른 콘텐츠 영역을 표시하는 단일 페이지로로드됩니다.

전제는 사용자가 콘텐츠 끝쪽으로 페이지를 아래로 스크롤하면 새로운 콘텐츠가로드되고 페이지 하단에 추가되어 '무한'스크롤이 생성된다는 것입니다. 인기있는 예로는 Facebook 타임 라인보기, Pinterest 및 Tumblr가 있습니다.

시차는 시점에 가까운 항목이 멀리있는 항목보다 더 빠르게 이동하는 것처럼 보일 때 나타나는 효과입니다. 이것은 움직이는 차나 기차에서 가장 잘 볼 수 있는데, 차량 가까이에있는 울타리와 나무는 빠르게 지나가는 것처럼 보이지만 멀리있는 산은 더 느리게 움직이는 것처럼 보입니다.

웹에서는 이와 동일한 효과를 사용하여 사이트 디자인에 깊이 감을 부여하고 종종 사용자 스크롤에 응답하여 움직임을 제공합니다.

또한 읽으십시오 :

말: 샘 햄튼-스미스