[디자인스타일명칭] 컨텐츠UI디자인 스타일(기법) 명칭 정리하기

디자인 + α/공부

[디자인스타일명칭] 컨텐츠UI디자인 스타일(기법) 명칭 정리하기_1편

32chaeyeon 2020. 7. 25. 20:13

여러분은 실무에서 작업을 하면서 가장 어려운 점이 무엇이신가요? 제가 가장 어려웠던 점은 UI디자인의 스타일이나 형태는 알고 있는데 정확한 명칭을 알지 못해 비슷한 종류의 레퍼런스를 많이 찾지 못한다는 것이였는데요ㅜㅜ 하지만 최근 좋은 강의를 수강하고 강의 교재로 공부를 하면서 이 고민을 많이 덜게 되었답니다! 그래서 제가 공부하면서 알게 된 UI스타일들과 그에 따른 명칭들을 정리하여 알려드리려고 합니다. 현재까지 제가 공부한 내용들을 몇가지의 카테고리로 분류하고 또 양이 많은 부분은 게시글을 나누어 포스팅하도록 하겠습니다. 먼저 오늘 포스팅할 내용은 컨텐츠 UI디자인의 종류와 명칭들입니다! 많은 도움 되시길 바랍니다~ㅎㅎ

컨텐츠 UI 란?

" 디자인을 구성하는 UI 구성요소 중 가장 일반적이고 많이 사용하는 UI입니다.

쉽게 말해 모든 디자인은 컨텐츠 UI들로 구성되어 있습니다. "

소개해드릴 컨텐츠UI디자인 스타일(기법) 명칭은 다음과 같습니다.

01. 2tone Gradation

02. Affordance Design

03. Broken Grid (Asymmentrical Layout)
04. Card&Grid UI

05. Chat bot UI (Machin Learning Style)

06. Circular design elements

01. 2tone Gradation

2가지의 색을 극점으로 두고 농도가 극점의 색으로 자연스럽게 퍼져 변해가는 계조를 의미합니다. UI디자인에서 주로 배경요소를 표현할 때 많이 사용하고 이미지 등과 혼합하는 형태로도 사용한다고 합니다.

https://dribbble.com/shots/4899130-Airline-ticket-booking-app

https://m.blog.naver.com/PostView.nhn?blogId=nvr_design&logNo=221186353849&proxyReferer=https:%2F%2Fpinterest.com%2Fpin%2F563935184583630019%2F%3Fsource_app%3Dandroid

https://www.behance.net/gallery/38707247/Netz-Identity-Web-OESU-x-MANY-COLORS

02. Affordance Design

사용자로 하여금 어떠한 행동을 하도록 유도하거나 특정행동을 쉽게 할 수 있도록 도움을 주는 힌트나, 암시등의 디자인입니다. 예를 들면 하단의 컨텐츠를 잘려보이게 디자인하여 하단으로 스크롤을 유도하는 것이 바로 어포던스디자인입니다.

https://dribbble.com/shots/5756276-Children-s-Education-Reading-App-01

https://www.pinterest.co.kr/pin/369787819387067823/

https://dribbble.com/shots/7198728-Travel-Quest-App-04-Interaction-design

03. Broken Grid (Asymmentrical Layout)

기본적인 UI가이드와는 달리 UI요소들과 요소들을 구성하는 부가적인 UI스타일을 일부러 깨뜨려 만든 디자인입니다. 사용자에게 독특한 인상을 남기고 새로운 패러다임을 제시하기에 좋은 방식입니다.

https://www.pinterest.co.kr/pin/355643701825891126/

https://www.pinterest.co.kr/pin/674273375446297616/

https://dribbble.com/shots/7037483-Empathy-Wines-mobile-app-design

04. Card&Grid UI

반응형에 맞게 컨텐츠를 넣을 수 있도록 만든 카드 형식의 모듈식 UI디자인입니다. 구글이 안드로이드 디자인 가이드에 적용한 사용자 인터페이스이기도 합니다.

https://dribbble.com/shots/7171328-Mobile-app-Energy-Life

https://www.pinterest.co.kr/pin/289989663510283276/

https://www.pinterest.co.kr/pin/366269382192366669/

05. Chat bot UI (Machin Learning Style)

문자 메시지와 같은 느낌의 대화를 하는 듯한 형태의 UI로 이루어지며 대부분 텍스트로 구성되며 텍스트가 어떠한 형태의 도형에 둘러싸여 왼쪽에서부터 나타나기 시작해 아래쪽으로 동일한 간격으로 컨텐츠가 늘어나게 되는 디자인 입니다.

https://dribbble.com/shots/9177121-Chat-bot-mock-up-design-ui-and-process-flow

https://dribbble.com/shots/3999537-Chatbot-Find-recipes

https://www.pinterest.co.kr/pin/377528381251228477/

06. Circular design elements

사용하고자 하는 이미지 요소를 둥근 형태의 프레임에 넣어서 표현한 디자인입니다.

https://www.pinterest.co.kr/pin/571535008965613863/

https://dribbble.com/shots/6281101-Musicly/attachments/1345354

https://www.pinterest.co.kr/pin/354095589450000850/

07. Collection UI

Card&Grid UI 와 비슷한 형태의 카드형식의 모듈식 UI디자인입니다. 하지만 Card&Grid UI는 타이틀이나 소제목이 없이 카드만 나열되어 있고 Collection UI는 카드형태의 UI를 감싸는 타이틀이나 소제목이 있는 것이 특징입니다.

https://www.apple.com/kr/newsroom/2018/06/apple-previews-ios-12/

https://uiplace.com/ui-kits/fancy-fashion-app-ui-kit

https://dribbble.com/shots/5952209-MUSETY-App/attachments

08. Context UI (Sensor UI)

사용자의 상황을 파악하고 인식하여 사용자가 현재 원하고 있는 정보를 다른 조작이 없이 자동으로 제공하는 사용자 인터페이스입니다. 주로 시간과 위치, 근접, 가속도, 대기압, 통신, 이미지 센서 등이 탑재되어 있는 스마트폰에서 많이 사용하며 사용자가 원하는 정보에 더 유연하게 접근할 수 있도록 도와준다고 합니다.

https://dribbble.com/shots/4796642-Carsharing-application

https://dribbble.com/shots/10870830-Health-App-V2

https://ejungle.co.kr/portfolio/portfolio_view.jsp?num=259&pageNum=1

09. Coverflow UI

카드 형태의 컨텐츠들을 좌우로 스크롤될 수 있도록 옆으로 늘어놓고 스크롤을 할때마다 가운데에 현재 보고자 하는 컨텐츠가 포커스되어 놓여지게 되는 UI디자인입니다.

https://dribbble.com/shots/5570811-Adfab-Projects-Coverflow

https://www.pinterest.co.kr/pin/676384437761463534/

https://dribbble.com/shots/5869879-Navigate-horizontally-between-albums

10. Flat UI

사실적이고 입체적인 디자인(스큐어모피즘)에서 벗어나서 장식적인 요소와 입체감 요소들을 제거하여 만든 디자인입니다. 미니멀리즘에 기반하여 평평하고 2차원적인 사용자 인터페이스입니다. 단순한 색상과 구성요소들을 통해 사용자가 직관적으로 인식이 가능하도록 만들었다고 하네요. 최근 보이는 대부분의 UI 스타일이 모두 Flat UI 입니다.