초보 온라인 셀러가 알아두면 좋은 웹디자인 용어 30가지

 

안녕하세요 셀러위키 입니다

오늘은 온라인 셀러들이 알아두면 좋은

기초적인 웹디자인 용어들에 대해

알아보도록 하겠습니다

 

예전엔 디자인은 온전히 디자이너들의

영역이었지만 요즘엔

 ✅미리 캔버스나 망고 보드 캔바 같은

좋은 무료 프로그램들이 많아서

특별히 포토샵을 하지 않아도 얼마든지 손쉬운

디자인을 직접 하실 수 있습니다👏😲 

 

그리고 프리랜서에게 외주를 

의뢰하는 경우들도 많은데요

이러한 경우 디자인 관련 용어들을

 어느 정도 알고 계시는 것이

미팅을 하고 업무를 의뢰할 때 좋습니다👍

 

그럼 30가지 기초 웹디자인 용어들에 대해 알아볼까요?

 

 

1.픽셀

 

웹디자인의 가장 작은 단위로

화면에 표시되는 점 즉 화소를 의미합니다

픽셀수(화소 수)가 많아질수록 

고품질의 이미지와 디자인이라고

할 수 있지만 그만큼 이미지 용량도 커지게 됩니다😭

 

2.DPI

 

DPI는 해상도로 

dot per inch의 약자입니다

즉 1인치당 점(화소)가 얼마나 들어가는지를

나타내는 값입니다

 

주로 인쇄가 필요한 디자인에서

쓰이는 개념으로 모니터의 해상도와

실제 인쇄물의 해상도가 다른 경우들이 

있기 때문에 선명한 인쇄물을 위해서는

보통 300dpi 이상의 해상도로 

이미지 작업을 하는 것이 좋습니다👍

 

3.상세페이지

 

상세페이지는 

제품이나 서비스의 핵심 특징과 강점 등을

 담은 이미지로 

최근 상세페이지에서는

모바일 최적화와 가독성

그리고 동영상, 움짤 등을 활용하여

상품을 더욱 직관적으로 보여주는 것이

매우 중요해지고 있습니다 ✅

 

간단한 상세페이지는 

미리 캔버스나 망고 보드 등의

프로그램을 활용하면 손쉽게

누구나 만들 수 있습니다

4.배너

 

배너는 

원래 홍보용 현수막을 가리키는 말이었지만

요즘엔 온라인 웹사이트나

모바일 app에서 보여지는

그래픽 이미지를 뜻합니다 

 

쇼핑몰 메인화면에서 쉽게 볼 수 있는

전환되는 형태의 이미지광고를

보통 '롤링배너'라고 합니다✅

 

5.CI

 

CORPORATE IDENTITY의 약자로

기업의 정체성과 사명 역할 등을

통일된 이미지로 나타내는 것을 의미합니다

 

쉽게 말하면 CI가 농심의 로고라면

BI는 신라면이나 너구리의 로고라고

할 수 있습니다

 

6.BI

 

BRAND IDENTITY의 약자로

브랜드의 정체성과 특징을

이미지의 형태로 나타내는 것을 의미합니다

 

BI가 신라면이라면 

CI는 농심 로고 라고 할 수 있습니다

 

7.HTML

 

HTML(Hypertext Markup Language)은

 웹 페이지에서 주로 쓰이는 코드로 

text를 뛰어넘는다는 뜻의

하이퍼 텍스트라는 의미를 지니고 있습니다

 

대부분의 웹사이트는 html로 

코딩되어 있으며 

온라인 셀러들도 상세페이지 관리 등에서

간단한 html을 활용하는 경우가 매우 많습니다😲 

 

8.<img src="">

 

가장 흔하게 쓰이는 html 코드로

"" 쌍따옴표 사이에 이미지의 웹주소를

입력하면 이미지가 표시되는 코드입니다

상세페이지를 관리할 때 주로 이러한

html 코드로 관리하면 매우 간편합니다

 

예시

 

f81fbf205782045b129d_20220328150735326.jpg">

 

9.누끼

 

일본어로 빼내다 제거하다는 뜻의

누키에서 따온 말로 

피사체의 외곽선을 따서 배경과 분리된 이미지를

 누끼 이미지 혹은 누끼컷이라고 합니다

 

썸네일 이미지나 상세페이지를

만들기 위해선 양질의 누끼이미지가 반드시 필요합니다✅

 

10.레이어

 

레이어는

 '겹' 또는 '층'이라는 뜻으로

주로 포토샵을 활용한 

이미지 디자인을 할 때 여러 이미지를

효과적으로 편집하고 작업할 수 있게끔

도와주는 겹치지 않는 투명한 층을 의미합니다

 

이미지가 복잡해질수록 레이어 수도 많아지고

레이어를 그대로 보존하기 위해선

반드시 이미지를 psd 포맷으로 저장하는 것이 중요합니다✅

 

 

12.벡터 이미지

 

벡터 이미지는 점(픽셀)과 점 사이의

위치를 수학적으로 연결해

이미지를 표현하는 방식으로 

이미지의 크기를 늘리거나 줄여도

손상이 되지 않기 때문에 

일러스트레이션이나 아이콘 같은

그림 형태의 이미지에서 매우 널리 쓰이는

방식의 이미지 포맷입니다 

 

ai 파일이나 esp 등

웹사이트보다는 주로 인쇄물이나

고해상의 출력물 작업을 위해

쓰이는 포맷입니다✅

 

13.비트맵 이미지

 

비트맵은 일반적인 이미지와 사진처럼

화면을 채우는 픽셀(점)으로 이뤄진 이미지로

이미지의 크기가 원본보다 커지거나

줄이는 경우 이미지의 손상이 발생합니다

 

jpg 파일을 포함한 gif png 등의 

대부분의 온라인상의 이미지는

비트맵 이미지들입니다

 

14.래스터 이미지

 

레스터 이미지는 비트맵 이미지와 

거의 같은 의미로 

이미지를 래스터화 한다는 뜻은

벡터 이미지를 비트맵으로

변환하여 이미지 용량을 줄이고

편집 가능하도록 전환한다는 것을

의미합니다

 

15.레이아웃

 

레이아웃은 간단하게 말하자면

구성이라는 의미로 

웹 화면이라는 제한된 공간 내에 

이미지, 텍스트, 영상, 메뉴 등의

다양한 시각적 구성요소들을

어떻게 배열하고 배치할지를

정하는 것을 의미합니다

 

 

 

16.그리드

 

그리드는 웹사이트나 이미지를

일관성 있는 구조로 디자인하기 위해

격자선으로 페이지의 위치를

시각적으로 쉽게 확인할 수 있는 시스템을 말합니다

 

그리드를 잘 활용하면 많은 양의 웹페이지나

이미지도 통일되고 정돈된 느낌으로 

일관성 있게 만드는 것이 가능합니다✅

 

 

17.목업

 

목업은 작업된 이미지가 

실제로 구현되었을 때 어떤 느낌일지를

미리 시안으로 볼 수 있게끔

만드는 것을 의미합니다

 

특히 고가의 비용이 요구되는

인쇄 작업이나 디자인은

작업물과 실제 결과물이

다른 경우 매우 큰 문제가 될 수 있으므로

목업을 통해 실제 시제품의 느낌을

미리 확인해두는 작업이 중요합니다✅

 

 

18.썸네일

 

썸네일은 

엄지손톱이라는 뜻으로

과거 인터넷 속도가 느렸던 당시

이미지를 표현하기 위해

손톱 크기로 작게 웹사이트에 등록하던

것에서 유래된 말입니다

 

현재는 주로 온라인 쇼핑몰 상품의

대표 이미지를 뜻하는 용어로

오늘날 썸네일 이미지는 보통 700px 이상의

고해상 이미지가 요구됩니다😲

 

 

19.RGB 컬러

 

rgb 컬러는

빛의 삼원색을 조합하여 색을 표현하는

방식으로 빨강, 초록, 파랑 세 가지 색을

혼합하여 컬러를 만들어 냅니다

 

주로 그래픽 디자인 웹디자인에서

쓰이는 컬러로 모니터의 빛이 포함되기 때문에

RGB 컬러로 작업된 이미지를 인쇄하면

모니터로 보는 것보다 

색의 채도가 낮고 탁해 

보이는 경우가 많습니다😭

 

20.CMYK 컬러

 

CMYK 컬러는 

시안, 마젠타, 옐로, 블랙

4가지 색을 감산 혼합하여

컬러를 표현하는 방식으로

주로 인쇄물 이미지를 만들거나

디자인할 때 쓰입니다

 

CMYK 컬러는 섞을수록 하얀색이 되는

RGB 컬러와 달리 섞을수록 검은색이 되기 때문에

실제 인쇄물과 거의 동일한 색 표현을 보여줍니다👍

 

 

21.16진수 코드

 

RGB 컬러를 16진수 형태로 

6자리 나타낸 HEX 코드로 

주로 #0000FF와 같이 표시됩니다

RGB 코드에 비해 간편한 방식으로

웹사이트 컬러칩이나 스타일 가이드를 만들 때

많이 활용되는 코드입니다

 

22.RGB 코드

 

RGB 코드는 색상을 표시할 때

레드 그린 블루 각각의 컬러 HEX 값을

표기하는 방식으로 

주로 RGB(255,0,0) 이와 같은

방식으로 표기됩니다

 

23.UX 디자인

 

UX 디자인은 사용자 경험 디자인의 약자로

사용자가 제품이나 서비스를 사용하고 체험할 때

최적의 경험과 쾌적한 이용이 가능하도록

잘 설계된 UI를 제공하는 것을 의미합니다 

 

예를 들면 우측에 보이는

톡 상담 버튼처럼 간편하게 상담으로

연결될 수 있는 버튼을 삽입하는 것을

UX 디자인이라고 할 수 있습니다

 

24.UI 디자인

 

USER INTERFACE의 약자로 

사용자가 제품이나 서비스를 사용할 때

마주하는 화면을 뜻합니다 

 

UI를 통해 사용자에게 전체적인

톤과 매너 시각적인 임팩트

그리고 손쉽게 구분할 수 있는 

의미와 기호를 잘 전달하여 

최적의 UX 설계가 가능하도록

 만드는 것이 중요합니다✅

 

간단한 UI 디자인의 예시를 들자면

연휴 기간 배송 안내 메세지를

단순한 텍스트로 삽입하는 것과

눈에 잘 띄는 배너 이미지로 삽입하는 것은

같은 메세지이지만

사용자의 경험이 크게 달라지는 것과 같습니다👌

 

25.GNB

 

GLOBAL NAVIGATION BAR의 약자로

쇼핑몰이나 웹사이트에서 

전체 사이트에서 공통적으로 보여지는

메뉴나 네비게이션 바를 의미합니다

 

일반적으로 GNB는 상단에 배치되는 

메뉴를 의미하며 화면이 바뀌더라도

계속적으로 노출되고 

주요 페이지로 손쉽게 이동할 수 있는

메뉴와 링크 버튼 등을 포함하고 있습니다

 

26.LNB

 

LOCAL NAVIGATION BAR

LNB는 GNB에 위치한 메뉴를 누를 경우

노출되는 소제목 형태의 메뉴나 버튼 등을 의미합니다

 

27.헤더

 

웹사이트를 구성하는 구성요소로

최상위 영역을 지칭합니다

일반적으로 웹사이트의 로고와

GNB 등이 포함된 영역입니다

 

28.푸터

 

웹사이트를 구성하는 구성요소로

최하단 영역을 지칭합니다

 

일반적으로 웹사이트 정보와 

이용약관 개인 정보처리방침

대표 연락처 이메일 주소 등이

표기되는 영역을 의미합니다👌

 

29.스타일 가이드

 

스타일 가이드는 웹사이트를 

만들기 위한 설계도 또는 메뉴얼

표현 할 수 있습니다 

 

스타일 가이드를 만들어두면

웹사이트를 제작하고 

이후 유지 보수 관리하는 데 있어

관리 요소를 최적화하고 

낭비를 줄일 수 있어 매우 효과적입니다👍

 

30.반응형 웹

 

반응형 웹은 웹사이트가 

PC, 태블릿, 스마트폰 등

여러 디바이스에서도 동일한 느낌의 

화면을 보여주도록 자동으로 

화면에 크기에 따라 

변화되는 웹페이지를 의미합니다

 

반응형 웹을 잘 구축하면

웹사이트를 관리하는데 

필요한 리소스가 크게 절감될 수 있습니다✅