요즘 워낙 많은 무료 웹디자인 소스와 웹 디자인 강좌 및 팁들이 쏟아져 나오는 시대이기에 바른 용어 검색시에 엄청난 이득을, 반대의 경우에는 많은 시간 소비를 가져옵니다. 아마 새 기술에 대한 부분들이 특히나 그러한데 많은 경우 바른 단어가 생각이 나지 않을 때가 많습니다.

이하의 부분들은 각 웹디자인/개발에 사용되는 단어및 용어들, 키워드 들을 적어 놓은 것들입니다. 새 트랜드가 떠오를 때 마다 반영될 예정입니다.

웹디자인 트렌드, 유행

• Adaptive Web Design

  “미리 맞춤틀을 파악하여 변화” ^{1 2} 미리 정해진 틀을 사용하여 브라우저 보다 유저에게 집중을 목표로 하는 디자인. 디바이스에 적응하는 방식으로 접근함. 고로 서버쪽 접근과 연관짓는 디자인 방식. 일정 부분은 반응형도 포함하며 여러 많은 기술들을 포괄적으로 사용하는 방식.

  • Progressive Enhancement: Adaptive와 동일시 되며 사용되기도 하며 단계적(혹은 점진적) 향상으로 번역됨. 개발순서와 기능,스타일 등을 컨텐츠 중심으로 모바일과 같은 단순 형태에서 부터 차근차근 쌓아 올라가는 방식. Mobile First 전략으로 변환되어 나누어 지기도 함. 모든 브라우저에서 기능과 보여지는 부분이 최대한 동일시 되도록 함.

• Responsive Web Design

  “맞춤을 위해 유동적 변환” ³ css media query 나 %를 활용한 유동적 레이아웃 & 이미지등을 활용하여 변환 가능한 디자인. 기존의 사이트를 Responsive 로 변환하기 간편하므로 더욱 널리 사용되고 있슴. 관련 키워드. elastic, fluid/liquid grid, responsive layout, adaptive layout

• Grid Design

  그리드 디자인은 정해놓은 사이즈 가이드를 따라 디자인하는 방식.
  

• Flat Design

  윈도우 8(metro design)⁴ 의 등장과 함께 신분상승한 디자인. 그림자나 그라데이션등의 입체감을 없엔 평면에 붙은듯한 디자인.

• Skeuomorphic Design

  애플이 자주 사용했던 실물과 비슷한 그래픽 모습을 구현하는 방법. Flat의 반대로 이해되어 버린 상황. ⁵

• Rich Design

  Skeuomorphic 과는 다르게 그림자나 그라데이션을 사용하여 입체감이나 스타일을 더한 디자인. Flat의 반대에 더 가까움.

• Material Design

  메터리얼 디자인. 구글의 디자인 가이드. Flat 과 Rich 사이의 디자인 패턴. 약간의 입체감을 더한 flat으로 이해되기도 함.

• One Page Web Design / Single Page Web Design

  원페이지 디자인. 한 페이지 안에 모든 페이지를 첨부한 디자인. 이벤트나 소개용으로 많이 사용됨.
  

• Cards Web Design

  핀터레스트와 같은 리스트를 박스로 표현하는 사이트와 함께 신분상승된 디자인.

• Monochromatic Web Design

  단일 색상을 톤을 변화해 가며 사용하는 디자인.
  

• Hypercolour Web Design

  하이퍼칼라 디자인. 화사한 강한 색을 사용한 디자인.
  

• Minimal Design

  불필요한 이미지, 요소들을 최소화 하며 단순한 디자인을 지향. 연관 개념으로 clean, simple 등이 있슴.

• Retro Web Design

  레트로, 예전 디자인. Vintage 로 대체 되기도 하고 물론 다르게 쓰이기도 함.

• Motion Web Design

  모션디자인. 정적인 페이지에 동적인 부분을 포함시킴. 슬라이드, 후버효과 등을 포함.
  

기능이 부각된 디자인

• Parallax (scroll)

  페랄랙스 디자인. 스크롤링 크기를 엘리먼트들에 다르게 주는 기법을 사용한 디자인.

• Full Screen Design

  풀스크린은 유저의 브라우저 사이즈를 로딩시에 계산하여 브라우저 전체를 채우는 디자인.

• Full Size Video

  풀스크린과 같이 비디오 영상을 배경으로 까는 디자인.

• Infinite Scroll

  스크롤링이 무한대로 되는 스타일.

• Modular Scroll

  웹사이트의 각 부분이 스크롤가능한 디자인.

• Split Screens / Gateway

  대칭이나 비교등의 목적으로 스크린을 크게 나누어 비슷한 디자인 패턴을 적용하는 스타일.

• Cinemagraphs

  정적인 이미지에 특정 부분만 움직인다던가 보통 말하는 gif 같은 움직이는 이미지를 활용한 방식.

• Interactive

  단순 스크롤 메뉴 클릭 이상으로 유저들이 참여할 수 있는 기능들을 첨부하여 컨텐츠에 더욱 빠지도록 하는 방식. 예전에는 Flash 사이트들이 이 목적으로 많이 쓰여졌슴. 옆으로 드레그, 클릭시 움직이는 그래프 사물, 영상 등등.

종류

• Editorial

  신문 혹은 메거진 웹사이트 디자인. 단순 Magazine style 로 말하기도.

• Portfolio

  포트폴리오 사이트. 사진들과 영상등을 부각시키는 사이트.

• E-Commerce

  쇼핑몰 사이트.

• Storytelling

  이야기 형식으로 풀어내는 사이트.

• Infographics

  인포그래픽 사이트. 정보를 보여주는 사이트.

• Gamification / Quizes / Option Paths

  정적이고 따불할 수 있는 사이트에 재미를 더하거나 반응 요소를 첨부하여 유저에게 다가가는 방식의 사이트. 전체적일 수도 있고 부분적일 수도 있슴.

• Microsite

  기존의 사이트에서 특정 페이지나 정보를 보여주기 위해 다른 디자인으로 제작된 사이트. 페이지 수가 적거나 한페이지로 구성.

웹사이트 요소

• Large Hero Areas

  보통 페이지 상단의 큰 베너 부분으로 큰 배경 이미지가 삽입됨.

• Landing Page

  마케팅과 연관된 단어. 해당 사이트의 클릭시 도착하는 페이지를 말함. Homepage 도 될수 있지만 제품소개나 방문자를 위한 특정 목적을 위한 페이지.

• Fold

  접힌 신문의 가장 먼저보이는, 즉 접힌부분의 상단을 나타내는 단어로 사이트의 가장 상단 부분.

• Slider

  엘리먼트가 슬라이드 하여 움직이는 기능.

• Accordion

  어코디온 악기와 같이 엘리먼트 묶음아래 한 부위가 늘면 다른부분이 줄어드는 방법을 구현한 부분.

• Modal (Box)

  특정 엘리먼트를 팝업처럼 돋보이게 하는 방법.

• Dropdown

  하단으로 메뉴나 엘리먼트가 출력되는 방법.

• Sticky * / Pinned elements / Fixed position navigation

  페이지에 고정된 엘리먼트.

• Scrollspy / Affix

  페이지의 위치를 고정된 엘리먼트가 알려주는 방법. 싱글페이지 사이트가 발전하며 개량된 메뉴 방식.

• Popover

  Modal과 비슷한 방식이지만 목적은 해당 링크나 엘리먼트의 설명이나 기능을 돕도록 바로 주위에 나타나게 하는 방식.

• Collapse

  특정 엘리먼트가 슬라이드하여 늘어났다 줄었다 하는 방식. Acoordion과는 살짝 다름.

• Carousel

  보통 생각하는 슬라이드와 같이 여러엘리먼트를 한곳에 모아서 슬라이드가 되며 보여주기도 하고 클릭으로 옮기기도 하는 것.

• Pagination

  각 페이지로 넘어갈 수 있도록 돕는 보통 하단에 위치한 숫자로된 링크.

• Breadcrumbs

  현 페이지 위치를 보여주는 형식. Home > About > Works

• Glyphicons / Glyphs / Font Icons

  아이콘을 이미지로 표현 대신 폰트로 보여주어 고화질에서도 깔끔케 보이도록 하는 방법. 요즘은 이 방법과 svg 와의 대결구도.

Extra

• Branding

  크게는 회사/제품을 시각/형상화 및 알림. 작게는 로고나 심볼, 아이콘을 사용하여 제품에 부각시킨 테크닉. 브랜딩을 위한 많은 자료들이 올라와 있슴.

• Wireframe

  사이트/앱 개발중 레이아웃및 상황의 뼈대를 그리고 수정하는 것/단계.

• Mockups

  기존의 프로토타입 혹은 테스팅을 위한 모형 개념으로 웹디자인에서는 wireframe 후의 단계중 기능은 없지만 실제 디자인을 표현해 낸 단계. 소위 말하는 포토샵 단계.

• Lorem Ipsum / placeholder text / dummy text

  공간 채움을 위한 의미 없는 글. 한글로도 가능.

• CMS

  content management system. 사이트의 글올리는것이나 유저관리등의 사이트 관리를 쉽게 돕는 시스탬.

• favicon

  파비콘. 보통 사이트의 주소 왼쪽에 나타나는 아이콘에서 이제는 윈도우의 사이트 아이콘이나 아이폰의 아이콘 영역까지 확장되어가는 중.

• Freebies

  무료로 제공되는 것을 검색시 free 보다는 freebies 가 명사의 역할을 더 확실히 하기에 필요한 검색결과에 더 가까이 근접할 수 있슴. 반대로 유료검색은 Pay보다는 Premium 으로 인식하는게 더 나은 검색 결과를 가져올 수 있슴.

• Template

  사실 무료와 상관이 없지만 급하게 친해지게 된 템플릿이라는 단어는 미리 말들어진 틀에 사용자가 채워넣거나 간단한 수정만을 요구하므로 수고를 거의 들이지 않고 결과를 얻는다는 개념에서 ‘무료’와 떨어질 수 없는 관계. 물론 무료 템플릿을 원하는 시장이 커진만큼 인터넷 결제의 성장과 함께 유료 템플릿 시장도 만만치 않게 성장함. 최근 이 premium 시장이 급성장 하면서 고급 디자인을 디자이너 없이 사용하게 되는 상황. 사실 웹디자인 사전의 모든 단어와 template 을 결합시키면 수많은 리소스가 널려 있는 세상을 보게 됨.

• CAPTCHA

  꼬부러진 글자를 빈공간에 넣으므로써 댓글이나 로그인 시 봇을 걸러내기 위한 기술. 이제는 봇을 걸러내기 위한 기술로 통일되어 쓰임.

• WYSIWYG

  위지윅. What you see is what you get. 보여지는데로 출력이 가능한 에디터. 예) 드림위버.