당신은 주제를 찾고 있습니까 “카드 ui – 모바일 카드형UI 디자인 작업과정[어도비XD]“? 다음 카테고리의 웹사이트 https://you.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://you.maxfit.vn/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 Madia Designer 이(가) 작성한 기사에는 조회수 8,529회 및 좋아요 230개 개의 좋아요가 있습니다.
카드 ui 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 모바일 카드형UI 디자인 작업과정[어도비XD] – 카드 ui 주제에 대한 세부정보를 참조하세요
추천, 구독, 알림, 댓글은 큰 힘이 됩니다.
채널에 멤버십 가입하여 디자인 원본파일을 받아보세요.
https://han.gl/OBONg
➤마디아 스타일가이드 : https://han.gl/ZmkOP
➤캐릭터 유튜브 채널 : https://han.gl/9q5gi
➤아래 재생목록에서 수백개의 디자인 \u0026 디자인 팁을 배워가세요
1. 포토샵 기초강의
https://han.gl/DtcSI
2. 일러스트레이터 기초강의
https://han.gl/En3UZ
3. 어도비XD 기초강의
https://han.gl/jpu30
4. 시청자 포트폴리오 컨펌
https://han.gl/b6INc
5. 웹 디자인UIUX
https://han.gl/ZMgL9
6. 모바일 디자인UIUX
https://han.gl/KB5tU
7. 아이콘 디자인
https://han.gl/qcHlM
8. 디자인 정보
https://han.gl/BL9AW
안녕하세요 디자이너 마디아입니다.
현재 실무에서 쇼핑몰 UIUX 구축 디자이너로 활동하고 있으며 학생분들에게 조금이나마 도움이 될 수 있는 강의로 여러분들에게 다가가도록 하겠습니다.
————————————————————————–
► youtube channel: https://bit.ly/2GJYUF1
►단톡방 : https://open.kakao.com/o/gakaJCvb
►mail : [email protected]
►cafe : https://cafe.naver.com/madiadesigner
————————————————————————–
본 디자인은 다양한 해외 벤치마킹을 통해 고민없이
비쥬얼 적으로만 디자인 되었음을 알립니다.
————————————————————————–
#모바일디자인 #어도비XD #앱디자인
카드 ui 주제에 대한 자세한 내용은 여기를 참조하세요.
[바이널엑스] 카드형 디자인 (Card UI Design) – 블로그 – 네이버
카드형 디자인은 매력적인 이미지나 컬러를 사용하여 지루하게 보일 수 있는 모듈UI 디자인의 단점을 보완하고 사용자에게 시각적인 즐거움과 직관적인 …
Source: blog.naver.com
Date Published: 7/24/2021
View: 8342
[내가정리하는 #article] UX/UI 개선의 카드형디자인(CARD UI)
# 카드형 디자인(CARD UI). 정보 디자인을 다른 단어로 표현하자면, 관계성 디자인이라고 합니다. 우리를 둘러싼 환경 …
Source: ppparkga.tistory.com
Date Published: 4/22/2021
View: 1828
카드 UI 속 박스와 그림자를 쉽게 생성할 수 있는 : Box Shadow Art
주요 콘텐츠를 카드로 구성할 경우 거의 무한대로 확장하거나 변형할 수 있어 활용이 쉽습니다. 반응형 디자인에서 카드 UI가 많이 쓰이는 이유이기도 …
Source: icunow.co.kr
Date Published: 5/7/2022
View: 6938
UI_카드형
2021. 11. 16 – Pinterest에서 예은 김님의 보드 “UI_카드형”을(를) 팔로우하세요. 앱, 앱 디자인, 모바일 디자인에 관한 아이디어를 더 확인해 보세요.
Source: www.pinterest.co.kr
Date Published: 9/13/2021
View: 4045
35개의 카드UI 아이디어 | 카드, 웹디자인, 레이아웃 – Pinterest
Stylish Instagram Templates Bundle by Pretty Bloom Designs on @creativemarket #ad Time for an Instagram Makeover in 2018? Display your photos, promotions …
Source: www.pinterest.com
Date Published: 11/5/2021
View: 4541
주제와 관련된 이미지 카드 ui
주제와 관련된 더 많은 사진을 참조하십시오 모바일 카드형UI 디자인 작업과정[어도비XD]. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
![모바일 카드형UI 디자인 작업과정[어도비XD]](https://i.ytimg.com/vi/pt4sqPGRj6M/maxresdefault.jpg)
주제에 대한 기사 평가 카드 ui
- Author: Madia Designer
- Views: 조회수 8,529회
- Likes: 좋아요 230개
- Date Published: 2021. 4. 10.
- Video Url link: https://www.youtube.com/watch?v=pt4sqPGRj6M
카드 UI디자인 하는 법 파헤치기
반응형
*본 포스트는 “Smashing Magazine”의 2016년 10월 11일 게재된”Nick Babich”의 “Designing Card-Based User Interfaces”라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다.
웹/모바일 어플리케이션들은 여러 페이지로 정보가 집약된 디자인에서 개인화된(personalized) 경험에 집중화된 디자인으로 바뀌어 가고 있습니다. 이러한 디자인은 많은 콘텐츠 조각들의 집합을 통해서 가능합니다. 지금 콘텐츠가 보여지는 방식은 카드 형태로 보여지고 있다고 볼 수 있습니다. 카드 기반의 인터랙션 디자인 모델링은 매우 다양하게 활용되고 있으며, 최근에는 거의 모든 곳에서 이런 디자인을 확인할 수 있습니다.(뉴스 사이트에서 식료품 사이트에서 까지 거의 모든 곳에서 볼 수 있습니다.)
이 포스트에서는, 카드 디자인이 UI디자이너에게 어떤 의미를 지니는지 알아보고, 카드 UI 기반으로 이루어진 3개의 주요 서비스에 대해서 알아볼 것입니다. 카드 UI디자인을 프로토타이핑하는 데에 관심이 있다면, 어도비의 새로운 Experience Design CC를 무료로 체험해 볼 수 있습니다.
카드란 무엇인가?
카드란 이미지와 텍스트들을 담고 있는 작은 직사각형인데 , 해당 이미지와 텍스트들이 보다 디테일한 정보로 연결해주는 역할하는 것들을 카드라고 볼 수 있습니다. UI 용어 상 ‘카드’라는 단어는 메타포의 대상인 현실의 ‘카드’와 메우 많은 유사 속성을 공유하고 있습니다.
웹/모바일 어플리케이션이 등장하기 이전에도 카드는 언제나 우리 생활에 함께 있었습니다. 명함, 야구게임카드, 또는 포스트잇과 같은 것들 말입니다. 그만큼 카드는 우리에게 친숙하기 때문에, 정보를 제공해주는 매체로서 우리에게 매우 직관적으로 작용할 수 있습니다.
야구게임카드는 실생활에서 만날 수 있는 카드의 매우 적절한 예라고 볼 수 있습니다. 한 선수에 대해서 사용자들이 알고 싶어하는 주요 내용에 대한 요약 정보가 작은 카드의 양면에 포함되어 있습니다. (이미지 출처 : oldbaseballcards)
카드의 이점은 무엇인가?
디지털 카드는 매우 다양한 컨텍스트에서 활용될 수 있으며, 올바르게 적용될 수 있으며, 사용자 경험을 발전시킬 수 있습니다. 다음은 왜 UI디자인에 있어서 카드가 좋은지에 대해서 알려주는 예제들입니다.
1) 컨텐츠를 덩어리 채로 분리시킬 수 있습니다. (Chunking Content)
카드는 정보들을 덩어리 채의 정보로 분리시킬 수 있으며, 사용자들은 덩어리 채의 정보를 읽기 쉽다는 이유로 선호하는 경향이 있습니다. 이러한 점들은 사용자들을 협박하고 시간을 빼앗어 가는 일종의 텍스트 벽(많은 양의 텍스트)을 줄이는 효과가 있으며, 사용자들이 보다 자신의 흥미 요소에 쉽게 빠질 수 있게 도와 줍니다. 마치 텍스트가 비슷한 속성에 맞춰서 문장이나 단락으로 분리되듯이, 카드는 정보들을 의미있는 섹션으로 분리시키는 역할을 합니다. 카드는 비슷한 정보의 조각들을 하나의 유의미한 정보르 붙여 주는 역할을 합니다.
카드는 정보를 담는 데에 있어서 매우 깔끔한 느낌을 줍니다. (이미지 출처 : Google)
2) 정보를 확인하기 쉽습니다. (Easy to Digest)
빠르게 정보를 교환하는 데에 있어서 카드는 매우 훌륭한 역할을 합니다. 정보를 카드에 배치하는 것은 사용자들이 정보를 확인하는 것을 보다 쉽게 해주는 역할을 합니다. 사용자들은 그들이 관심있어 하는 정보들에 대해 매우 쉽게 접근할 수 있게 도와줍니다. 그리고 사용자들이 정보에 집중할 수 있는 데에 있어서도 도와주는 기능 또한 합니다.
사용자들은 카드를 쉽게 스캔하고, 넘길 수 있습니다. (이미지 출처 : Behacne)
3) 시각적으로 즐거움을 줍니다. (Visually Pleasing)
카드 기반의 디자인은 시각적 요소에 매우 큰 영향을 받는 경향이 있기도 합니다. 특히 카드 기반 디자인은 이미지 정보에 매우 의존적인 성향을 지닙니다. 이미지 정보는 사용자들에게 매우 효과적으로/즉각적으로 관심을 이끄는 역할을 하며, 이러한 점 때문에 이미지 정보는 사이트와 모바일 디자인을 보다 효과적으로 만들어 준다는 점이 이미 연구 결과에 의해 검증이 되기도 했습니다. 카드 기반 디자인에서 이미지에 강조점을 주는 것은 사용자들에게 보다 매력적인 디자인을 구현할 수 있는 역할을 해줍니다.
카드는 시각 정보로 사용자들을 즐겁게 할 수 있습니다. (이미지 출처 : Google)
4) 다양한 스크린 사이즈에 잘 대응합니다. (Good For Varying Screen Sizes)
카드의 가장 중요한 속성 중 하나는 거의 무한대로 확장/변형이 가능하다는 점입니다. 카드는 매우 쉽게 사이즈 업/다운이 가능하기 때문에 반응형 디자인에 있어서 매우 탁월한 선택 중 하나라고 볼 수 있습니다. 이러한 점은 하나의 미적인 요소를 디자인함으로써 다양한 스크린 상에서 일관된 경험을 제공할 수 있는 편의를 줍니다.
카드는 모바일 디바이스와 다양한 스크린 사이즈에 거의 완벽한 적응력을 보여줍니다. (이미지 출처 : Google)
5) 엄지 손가락을 위해서 디자인되었다고 볼 수 있습니다. (Designed for Thumbs)
카드는 엄지 손가락을 위해 디자인되었습니다. 왜냐하면 카드는 어플리케이션 기능을 하기 위해 디자인된 것처럼 보이기도 하기 때문입니다. 디지털 카드는 현실의 카드와 같은 방식으로 작동합니다. 사용자들은 카드의 이러한 단순함을 좋아하고, 더 많은 정보를 위해 카드를 물리적으로 엄지로 움직이는 행위를 매우 직관적으로 인식하고 이해합니다.
카드는 매우 활용성이 높습니다. 애니메이션과 움직임을 적용하는 데에도 아주 유리합니다. (이미지 출처 : Behance)
카드 기반 디자인의 좋은 사례들
카드 기반 디자인은 데스크톱과 모바일 플랫폼 간 경계선에 서 있다고 볼 수 있으며, 사용성과 인터랙션디자인 사이의 차이를 연결해주는 역할을 합니다. 카드 기반 디자인을 성공적으로 수행하기 위해서는, 미적인 완성도를 필요로 하며 분명한 액션으로 직접적으로 사용자들을 끌어 들일 수 있어야 합니다.
1) 지속적 정보 제공(stream)에 적합함
정보를 스트리밍 하는 데에 있어서 카드 기반 디자인이 활용될 수 있습니다. 페이스북은 최근 일어나는 일들에 대해서 뉴스피드 상에서 간략하게 정보를 제공하는 데에 탁월한 역할을 합니다. 여기에서 카드의 가장 중요한 역할은 ‘해체’입니다. 카드는 끝없는 정보의 업데이트에서 정보들을 분리시키는 역할을 합니다. 이러한 기능은 정보를 패킷 단위로 분리시키고, 공유하기 쉬운 형태로 만듭니다.
페이스북은 콘텐츠 기반 카드 디자인의 매우 훌륭한 사례입니다.
2) 정보 발견(discovery)에 적합함
카드는 비슷한 속성의 콘텐츠들이 스스로 자리를 잡고 사용자들게 전달될 수 있도록 도와주며, 사용자들이 자신의 관심사에 맞는 정보들을 쉽게 찾을 수 있도록 도와줍니다. 온라인 상에서 자신들의 창작물들을 공유하는 비헨스를 보면, 카드 기반 디자인은 창작물들을 전시하는 데에 있어서 매우 적합한 역할을 함을 확인할 수 있습니다.
비헨스는 카드 레이아웃을 활용함으로써 직관적인 UI를 제공합니다.
틴더(Tinder)는 다음 정보에 대한 발견 메카니즘을 잘 활용하여 전세계에서 가장 인기있는 앱이 된 사례 중 하나입니다. 틴더는 그냥 카드는 옆으로 밀면 끝입니다. 추천받은 상대방이 맘에 들지 않으면 그냥 옆으로 카드를 넘기면 끝인 것입니다. 이 스와이핑 인터랙션 메카니즘은 호기심을 자극하듯 중독성이 있습니다. 스와이핑을 할 때 마다 정보를 새롭게 모으게 되며, 이 축적된 정보에 따라 사용자에게 가장 최선의 정보를 제공하기 때문입니다.
(이미지 출처 : Tinder)
3) 업무 프로세스 정리(workflow)에 적합함
카드는 쉽게 특정 카테고리에 맞게 정리되기가 쉽습니다. 트렐로는 카드 스타일 인터페이스를 활용해서 대시보드를 만들고 각각의 업무를 표시하는 데에 있어서 탁월한 역할을 합니다
트렐로 보드 예시
4) 대화형 인터랙션(dialog)에 적합
카드는 콘텐츠 콘테이너와 같은 역할을 합니다. 카드는 사용자 행동(action)을 담아 내기에도 아주 적절합니다. 예를 들어, 사용자에게 파일 전송 요청 메시지가 표시되어야 한다고 할 때, 승인 또는 거절을 결정할 카드 팝업 메시지가 표시되게 됩니다. 아래 배치한 애플의 사례는 ‘사진’ 앱이 보여주는 인터랙션인데, 개발자들은 이 인터랙션을 어떤 종류의 앱에도 적용할 수 있습니다.
(이미지 출처 : 애플)
5) 대시보드(dashboard) 표현에 적합함
다양한 출처의 정보들을 조직화할 때 카드 디자인은 매우 유용한 역할을 합니다. 카드를 사용하면서, 논리적인 그룹들로 정보를 분류할 수 있으며, 특정 정보들을 모으고, 컨텍스트에 맞춰서 정보를 표현할 수도 있습니다. 유사한 내용으로 분류된 컨텐츠들은 쉽게 그룹화될 수 있으며, 또 다른 형태의 정보 덱(카드 모음)으로 다시 발행되어 사용자들에게 전달될 수 있습니다.
(이미지 출처 : 메테리얼 디자인)
카드 기반 디자인 언어(Card-based design language)
2010년, 마이크로소프틑 ‘매트로 디자인 언어’를 발표했습니다. 해당 언어의 핵심적인 디자인 키워드는 어플리케이션들의 콘텐츠에 집중하는 것이었으며, 플랫한 디자인 요소들과 타이포그래피, 카드들을 통해서 구현되었습니다. 카드는 단순한 디자인 구성 요소 이상의 의미를 지니고 있었다고 볼 수 있는데, 이것은 쉬운 인터랙션을 제공하기 위해서 매우 핵심적인 기능 요소로도 분류될 수 있기 때문입니다.
마이크로소프트 윈도우 8
카드를 보다 디테일하게 디자인하는 법
1) 단순성을 지니는 카드(Cards and simplicity)
카드라고 하면, 단순성이 가장 첫번째로 카드에게 지켜져야 할 속성이라고 할 수 있습니다. Game Cousins는 “하나의 조각에는 하나의 정보만”이라는 원칙을 바탕으로 하고 있습니다. 물론 하나의 카드가 여러 개의 정보를 포함하고 있을 수는 있지만, 궁극적으로 하나의 카드는 하나의 정보나 콘텐츠에만 집중하고 있어야 한다는 것입니다. 이런 방식은 사용자들에게 정보를 선별적으로 소비하고, 공유하는 데에 효과적인 역할을 합니다.
ReaLync는 많은 정보들 중 가장 중요한 정보를 우선적으로 보여주기 위해서 카드 형식의 인터페이스를 취하고 있다고 볼 수 있습니다.
(이미지 출처 : piperlawson)
2) 카드와 반응형 디자인(Cards and responsive design)
다양한 디바이스에서 일관된 디자인을 경험하게 해주는 것이 얼마나 중요한지는 모든 사용자/디자이너들이 알고 있는 부분입니다. 다양한 스크린을 대상으로 디자인할 때 각 플랫폼이 지니는 스크린 상의 특성을 최대한 활용해야 하는데, 카드를 사용함으로써 콘텐츠들을 쉽게 다양한 사이즈의 스크린에 적응(adjust)시킬 수 있습니다. 카드는 훌륭한 반응형 프레임워크와의 적합성을 보여줍니다. 카드 그리드는 어떠한 스크린에도 재설계되어 들어갈 수 있습니다.
디지털 카드의 가장 큰 미덕 중 하나는 다양한 방법으로 변형되어 적용될 수 있다는 점입니다. 예를 들어 모바일 플랫폼의 경우, 카드는 중첩되어 쌓이는 식으로 표현될 수 있습니다.
더버지의 모바일 표시 화면
더버지의 데스크톱 표시 화면
카드는 고정된 높이를 가지거나 유동적인 높이를 가질 수 있습니다. 고정 폭을 갖게 함으로써 디바이스에 따라서 높이가 유동적으로 변하게 만드는 것 또한 가능합니다.
(이미지 출처 : 인터컴)
3) 카드와 타이포그래피 (Card and typography)
카드 디자인 내의 텍스트는 매우 쉽게 읽을 수 있어야 하며, 가독성을 최대한으로 높이는 디자인 구성을 가져야 합니다.
단순한 서체와 보기 쉬운 컬러 스키마를 선택해야 합니다. (텍스트는 명확한 배경색 위에 충분한 대비값을 지니는 색상으로 배치되었을 때 가장 읽기 좋은 형태로 자리 잡습니다.)
서체의 종류는 가급적 제한하도록 합니다. 사실 대부분의 카드 디자인 프로젝트에서 하나의 서체 종류면 충분하기도 합니다.
(이미지 출처 : 메테리얼 디자인)
결론
이 포스트를 읽는 대부분의 독자들은 카드 스타일 디자인이 왜 중요한지에 대해서 이미 넓은 이해도를 지니고 있을 것입니다. 이 트렌드는 당분간은 계속 유지될 것으로 보입니다. 카드는 점점 어플리케이션 디자인에서 핵심적이면서도 중요한 역할을 계속해서 해 나가고 있습니다.
카드 디자인의 강점은 디자인적으로, 그리고 사용성적으로 모두 우수한 성질을 지닌다는 겁니다. 단순히 보여지는 면이 깔끔해서가 아니라 복잡한 정보를 담아냄에 있어서 어떤 디자인 레이아웃 보다 유동성(flexibility가 우수한 레이아웃입니다. 요즘 사람들은 정보를 빠르게 찾으려 하는 경향이 있으며, 카드 디자인은 이러한 사용자들의 니즈에 어떤 디바이스에서든 잘 대응하는 성질을 보입니다.
* 이 기사는 어도비 사의 후원 하에 게재되고 있는 UX design 연재 기사의 일부입니다. 어도비 사는 최근 Experience Design App을 만들었으며, 이 앱은 빠르면서도, 유동적인 디자인 프로세스에 대응하기 위해 만들어졌습니다. 아이디어를 빠르게 시각화하고, 인터랙티브 프로토타이핑을 하게 해주며, 결과물에 대한 테스트까지 한 번에 할 수 있게 해줍니다.
비헨스에서 Adobe XD를 통해 제작된 작품들을 감상할 수 있으며, Adobe XD 블로그를 방문하여 관련 최신 정보를 얻을 수도 있습니다. 최근에 Adobe XD는 다양한 기능 업데이트를 진행한 바 있으며, 테스트 베타 진행 중에 있기 때문에 언제든지 다운로드 받아서 무료로 사용해볼 수 있습니다
원 포스트 저자에 대하여
Nick Babich는 개발자이며, 최신 기술에 관심이 많으며, UX를 사랑하는 사람입니다. 10년 이상의 SW업계에서의 개발 경력을 가지고 있습니다. 광고와 심리학, 그리고 영화에 특히 관심이 많습니다.
저작권 관련 정보 (License Info.)
원 저작 게시물 제목(Original Post Title) : Designing Card-Based User Interfaces
원 저작 게시물 주소(Original Post URL) : URL Link
원 저작 게시물 제공(Original Post Provider) : NICK BABICH, Smashing Magazine
본 콘텐츠는 유용한 정보를 널리 알리려는 취지에서 해외 기사를 국문으로 번역하여 제공하는 포스트입니다.
(This post is a translated content to Korean in purpose to spread good information more broadly over the globe.)
번역된 내용 상의 문제가 있거나, 저작권 침해 요소가 있다고 저작권자가 판단할 경우, 요청에 따라 언제든지 지워질 수 있습니다.
(If the translated content has some problems itself or the original content provider/creator think posting the translated content here inappropriate, this can be removed immediately upon request.)
번역된 콘텐츠는 CC 4.0 기준을 따르며, 정보 공유 시 최초 저작자(원 저작 관련 내용)를 콘텐츠 내에 표기해 주어야 합니다.
(The translated content follows CC 4.0 policy. When it’s shared, the original content provider/creator has to be attributed in the content.)
반응형
UI 개선의 카드형디자인(CARD UI)
# 먼저 말하는 지향점
“서비스를 이용하는 사용자 주의(Attention) 변화에 따라 보이거나 가공되는 정보가 어떻게 조정(Tune)되어야 할까?”
성공적인 UI를 적용하려면 먼저 사용자가 직관적으로 콘텐츠를 인지할 수 있도록 콘텐츠의 본질적 특성을 고려하여 정보와의 인터랙션을 디자인해야 하며 사용자 탐색을 고려해 효과적인 형태를 제공해야 한다.
실제로 실무에서 작업하면서 느끼는 부분은, 수많은 데이터를 수집하고 가공하는 지금은 정보가 스크린뿐만 아니라 웨어러블과 센서 영역까지 확장될 때, 디자이너는 정보와 정보의 비율과 균형에 관해서도 고민해야 한다는 것이다.
기존의 제품 소프트웨어 UI와 인터랙션을 설계하는 것을 넘어 서서, 다양한 센서로 실시간 측정되고 쌓이는 데이터를 핵심으로 서비스 내 사용자 경험을 설계하게 하는 것이 중요한 관점이 되었기 때문이다. 그래서 다양한 사물 디바이스가 만들고 수집해 내는 데이터가 서비스 내 사용자에게 인지되고 잘 보이게 만드는 역할을 디자이너 또한 함께 고민해 보고 작업해야 한다.
(회사 블로그에 작성했던 원고중 관련 설명만 다시 발췌.)
# 카드형 디자인(CARD UI)
정보 디자인을 다른 단어로 표현하자면, 관계성 디자인 이라고 합니다. 우리를 둘러싼 환경과 우리 자신과의 관계성에 초점을 맞추고 거기에 어떤 문제가 있는지 발견하고 해결 방법을 찾아 정보를 실제의 형태로 만들어 내는 것입니다. 인간의 사고 프로세스, 지식공유와 커뮤니케이션, 시스템과의 상호 작용 등 눈으로 볼 수는 없지만 무언가를 활동할 수 있게 형태를 주는 것이 바로 정보 디자인입니다.
이러한 관계성을 잘 표현하는 기능 중 카드형 디자인 (CARD UI) 이 있습니다. 2012년 10월 구글 나우에 카드 UI를 적용한 이후 카드는 많은 모바일 서비스를 기반으로 빠르게 퍼졌습니다. 안드로이드 Senior UX Director인 Matias Duarte의 인터뷰에 의하며 구글 나우의 카드는 ‘전통 건축에서의 개념인 기능과 형태의 결합물’의 디지털 버전으로서 카드의 외양을 담아 내용 그 자체로 표현할 수 있는 형태라고 했습니다. 명확한 정보를 제시하는데 집중하였기에 iOS7 이전에 유행하였던 스타일인 가죽이나 나무 메탈 질감을 입힐 필요가 없어져 카드의 플랫 스타일은 이후 구글 플러스, 유튜브 등의 서비스까지 빠르게 퍼졌습니다.
UI에서 카드를 사용하는 것은 실제 카드처럼 인식하는 효과가 있습니다. 사실 카드라는 것은 모바일 장치 이전에 명함, 야구, 카드놀이 등 주변에서 쉽게 접할 수 있는 익숙한 존재입니다. 이런 역할로서 카드는 UI/UX 관점에서 꽤 널리 퍼져있는 상호 작용 모델입니다. 그래서 UI에서 카드의 역할은 어떤 정보에 진입하기 위한 시작점이라고도 합니다. 보통 카드의 형식은 정보를 함축적으로 보여주는 이미지와 텍스트가 담긴 직사각형의 모양으로 구성되어있습니다. 카드는 다양한 요소로 구성된 콘텐츠를 표시하는 편리한 수단이기 때문에 잘 만들어진 UI와 좋은 사용성의 균형을 맞출 때 기본 형식으로 사용되는 수단입니다. 따라서 사용자에게 카드 UI는 실제 생활에서처럼 콘텐츠를 대표한다는 것을 더 직관적으로 보여줍니다.
아래 항목을 참고하여 카드를 UI에 올바르게 적용하면 사용자 경험에 도움을 줄 것입니다.
👩🏻💻컨텐츠를 덩어리 채로 분리시킬 수 있습니다. (Chunking Content)
👩🏻💻정보를 확인하기 쉽습니다. (Easy to Digest)
👩🏻💻시각적으로 즐거움을 줍니다. (Visually Pleasing)
👩🏻💻다양한 스크린 사이즈에 잘 대응합니다. (Good For Varying Screen Sizes)
# UX/UI 개선의 CARD UI
이렇게 카드는 거의 모든 것을 담을 수 있는 디자인 컨테이너입니다. 카드에 콘텐츠를 배치하면 사용자가 쉽게 이해할 수 있습니다. 이와 관련하여 사용자는 관심 있는 콘텐츠에 쉽게 접근 할 수 있습니다. 이를 통해 사용자는 원하는 방식으로 참여할 수 있습니다. 올바른 기능성과 모양을 구현해 놓은 카드 UI는 앱의 UX 측면도 개선 할 수 있습니다.
👩🏻💻반응형 및 모바일 디자인 카드의 가장 중요한 점은 거의 무한대로 조작할 수 있다는 것입니다 . 카드 스타일의 디자인은 카드가 더 이해하기 쉬운 청크 (Chunk) 로 콘텐츠를 제공하므로 데스크톱과 모바일 장치 모두에 적합합니다 . 카드가 쉽게 확장 또는 축소되는 콘텐츠 컨테이너 역할을 하므로 반응형 디자인에 적합합니다 . 그래서 카드를 사용하면 장치와 관계없이 일관된 경험을 제공할 수 있습니다 .
👩🏻💻엄지 영역(thumb zone)에 최적화된 디자인 카드는 마치 앱을 위해 만들어진 스타일인 것 같이 엄지 영역 (thumb zone) 에 최적화되어있습니다 . 모바일 앱 디자인과 관련하여 카드 인기의 핵심 부분입니다 . 디지털 카드는 실제 카드와 같은 방식으로 작동하여 사용자에게 편안한 경험을 제공합니다 . 사용자는 작동 방식에 대해 생각할 필요가 없습니다 . 그들은 카드의 단순성을 좋아하고 더 많은 정보를 얻기 위해 카드를 뒤집거나 다음 정보 덩어리를 스와이프 (swipe) 하는 물리학을 직관적으로 이해합니다 .
👩🏻💻대시보드(dashboard) 표현에 적합한 디자인 다양한 출처의 정보들을 조직화할 때 카드 디자인은 매우 유용한 역할을 합니다 . 카드를 사용하면서 , 논리적인 그룹들로 정보를 분류할 수 있으며 , 특정 정보들을 모으고 , 문맥에 맞춰서 정보를 표현할 수도 있습니다 . 유사한 내용으로 분류된 콘텐츠들은 쉽게 그룹화하며 또 다른 형태의 정보 덱 ( 카드 모음 ) 으로 다시 발행되어 사용자들에게 전달될 수 있습니다 .
카드 UI의 7가지 특성
카드 UI의 7가지 특성
카드는 아주 오래 전 부터 정보 전달 매개체로 사용되어 왔다. 중국에서는 9세기 경 부터 카드 게임이 성행해따는 기록이 있고 17세기 영국에서는 무역상들이 고객에게 서비스를 알리는 수단으로 명함의 초기 형태인 트레이드 카드를 사용하였다고 한다. 우리의 일상 생활속에서도 각종 신용카드 ,축하 카드 , 신분증, 쿠폰, 게임 카드 등을 쉽게 찾아볼 수 있다. 이처럼 우리는 이미 카드를 사용하고 교환하고 수집하는 방식에 익숙해져 있다.
이와 같은 방식으로 카드 형태의 UI가 모바일 서비스를 중심으로 급속도로 퍼져가고 있다. 구글은 검색, 구글 나우, 구글 플러스, 구글 맵, 구글 글래스 등 서비스 전반에 카드 UI를 채용하였으며 야후 페이스 북 트위터 등의 주요 모바일 서비스도 다양한 현태의 카드를 제공하고 있다. 네이버도 iOS네이버 앱 검색 결과를 시작으로 네이버 앱 메인 화면과 Now 앱 라이프 매거진 등 여러 버시스에 카드 UI를 제공 하고 있다.
카드 UI가 이처럼 모바일 환경에서 주목받는 디자인 트렌드로 자리매김하기까지 어떤 배경이 있었던 것일까?
카드 UI의 2가지 마일스톤 페이스북의 타임라인과 구글 나우 카드 UI가 이렇게 확산되기까지 기여한 2가지 계기로 , 2011년 9월에 도입된 페이스북의 타임라인과 2012년 10월에 선보인 구글 나우의 카드를 꼽을 수 있다.
페이스북은 2011년 9월에 타임라인을 도입하여 지금의 카드 UI를 처음 선보였다. 초기의 프로필 페이지는 텍스트, 이미지 정보가 혼합된 목록 현태로 제공되어 탐색이 불편하였다. 타임라인은 이렇나 한계를 보완한 카드 UI를 적용하여 정보 간 구분을 명확하게 하고 특히 사진 동영상을 부각하여 빠르게 정보를 스캐닝 할 수 있다. 2년 후인 2013년 3월, 뉴 피드에도 카드 UI를 도입 한 후 카드는 이제 페이스북의 보편화도니 UI로 자리잡게 되었다.
또한 2012년 10월 구글 나우에 카드 UI를 적용한 이후 카드는 많은 모바일 서비스로 빠르게 확산되었다. 안드로이드 senior UX director인 Matias Duarte의 인터뷰에 의하며 구글 나우의 카드는 ‘전통 건축에서의 개념인 기능과 현태의 결합물’의 디지털 버전으로 그런 의미에서 카드의 외양은 담고 있는 내용 그 자체 이다. 명확한 정보를 제시하는데만 집중하였기에 iOS 7 이전에 유행하였던 스타일인 가죽이나 나무 메탈 질감을 입힐 필요가 없었고 이렇나 카드의 플랫 스타일은 이후 구글 플러스, 유튜브 등의 서비스로 빠르게 확산되었다.
그렇다면 카드 UI의 어떤 점 때문에 이러처럼 많은 모바일 서비스로 확산되고 있는 것인지 다음 7가지 카드 UI의 특성을 정의해 본다.
카드 UI의 7가지 특성 7 Characteristics of Card UI
1. Homogeneous 이질적인 성질과 형태를 섞어서 보여주기 쉬운 Structure
2. Storytelling 쉽고 빠르게 이야기를 전달하는 Design
3. Easy to Manipulate 누구나 다루기 쉬운 interaction
4. Flexible 유연하게 형태 변형이 가능한 interaction
5. Modular Lego-like 멀티스ㅡ린 환경에 호환이 쉬운 Structure
6. Simple & Aesthetic 실플하면서도 디자인적으로 아름다운 Design
7. Fun to Play 가지고 놀기 재미있는 Interaction
1. Homogeneous – 카드는 이질적인 정보들을 한데 묶어 보여주고 쉽다.
소셜 네트워크 서비스에서는 출처와 성격이 다양한 정보를 하나의 공간에서 제공한다. 각 콘테츠 고유의 특성을 살리면서 일관대 사용 경험을 주려면 개별 탬플릿을 제공하면서도 가이드로 제한을 둘 수 밖에 없었다.하지만 카드 UI는 이런 상호아에서 고민거리를 쉽게 해결 할 수 있다. 어떠한 콘텐츠라도 최소한의 기본 디자인 원칙만 준수하여 카드 프레임 내에 들어가면 명확한 콘텐츠 단위로 구분되면서도 디자인 측면에서 이질감이 없는 동일한 종류의 정보 단위가 된다.
2. Storytelling – 카드는 쉽고 빠르게 이야기를 전달한다.카드는 콘텐츠를 강조하여 쉽고 빠르게 스토리를 전달한다.
마치 우리가 영화 포스터를 보고 즉시 그 영화의 대략적인 스토리, 분위기, 출연진 등의 정보를 파악하고 영화를 볼지, 안 볼지를 결정하는 것과 유사하다. 카드 내 타이틀, 이미지, 텍스트, 출처 등의 정보를 통해 사용자들은 콘텐츠를 쉽게 파악할 수 있다. 구글 플러스의 뉴스카드는 뉴스에서 중요한 썸네일과 타이틀 정보를 부각하여 관심 뉴스인지를 쉽게 판단할 수 있고, 이미지 카드는 이미지와 출처 정보를 노출 하여 콘텐츠의 스토리를 빠르게 전달한다.
3. Easy to Manipulate – 카드는 누구나 다루기 쉽다.카드는 다양한 방법으로 조작하기 쉽다.
실물의 카드도 뒤집어서 추가 정보를 확인하고 접힌 상태에서는 요약 정보를 제공하고 펼치면 추가 정보를 제공할 수 있다. 또한 카드를 쌓아서 공간을 절약할 수 있고, 그룹별로 보관하거나 가나다순으로 조합하는 등 다양한 방법으로 활용할 수 있다.
모바일 서비스에 카드 UI를 적용하면 열거한 친숙한 조작 방식들을 인터렉션과 애니메이션으로 그대로 재현할 수 있다. 사용자들은 현실 세계의 카드 조작 방식에 익숙하기에 새롭게 학습할 필요 없이 쉽게 인터렉션을 익힐 수 있다. 예시로 구글 나우에서는 카드를 옆으로 밀어서 삭제하거나 뒤집어서 설정을변경하는 등 제스처로 추가 액션을 간편하게 할 수 있다.
4. Flexible – 카드는 유연하게 변형이 가능하다.
현실 세계의 카드는 휴대하기 편하고 다양한 환경에 잘 들어맞을 수 있도록 작고 가볍고 유연하다 생일 카드를 고를 때 디자인이나 선물 크기에 어울리는 사이즈 담고 싶은 메시지의 양을 고려하여 단면카드 2단/3단으로 접을 수 있는 카드, 음악이 나오는 카드, 팝업 카드 등에서 고를 수 있듯이 모바일에서의 카드도 서비스의 제공 목적과 다양한 스크린 크기에 대응하여 유연하게 변형 할 수 있다. 예시로 구글의 Knowledge Graph 검색 결과는 사용자가 입력한 키워드, 사용자의 검색의 도 및 스크린 크기에 맞춰 요약형/일반형/확장형 등 다양한 크기와 스타일의 카드를 제공한다.
5. Modular Lego-like- 카드는 멀티 스크린 환경에서 호환이 쉽다.
카드는 레고 블록 같은 독립된 콘텐츠 모듈로 다양한 스크린 환경에서 가록 또는 세로로 자유롭게 배열하여 대응할 수 있다. 이러한 카드의 장점을 반영한 좋은 사례가 바로 구글 플러스다. 그글 플러스는 구글의 Mobile First 전략에 따라 카드 UI반응형 웹으로 작용하여 모바일 기기부터 데스크톱에 이르는 전체 서비스를 통일감 있게 구현하였다.
6. Simple & aesthetic – 카드는 심플하고 아름답다.
잘 디자인된 모바일 카드 UI를 보면 하나의 액자 속에 든 아름다운 그림을 보는 것과 같이 대상물과 스토리가 명확하고 단순하다. 또한 제공하는 정보의 중요도에 따라 디자인의 강약 조절이 잘 표현되어 있다. 카드 UI가 적용된 구글 검색결과를 보면 불필요한 블루 링크는 최소화하여 여백을 활용하였으면 크고 읽기 쉽게 텍스트를 제공하고 있다. 이렇듯 카드는 사용성 측면에서의 장점뿐만 아니라 심미적으로도 아름답다.
7. Fun to Play with – 카드는 가지고 놀기 재미있다.게임 도구로서 카드는 널리 이용되고 있다.
게임을 할 때 양손을 이용해 화려한 테크닉으로 카드를 섞고 나누어 주고, 받은 카드를 살며시 펼쳐서 확인하고 한장 한장 카드를 뒤집어 보면서 패를 확인하는 손으로 느낄 수 있 오묘한 재미가 있다. 이는 게임 룰과 승패를 떠나서 카드의 형태와 질감 그 자체가 매력적이기 때문이다.그런 카드가 주는 느낌을 이제 스마트폰의 터치 스크린과 다양한 센서 진동 인터렉션을 통해 유사하게 재현해 낼 수 있다. 이처럼 모션과 인터렉션이 주는 신선한 느낌은 유사항 카드 UI사이에서 차별성을 줄 수 있는 요소이다.
Mobile Dominant Design 으로 입지를 구축하고 있는 카드는 뉴스피드 반응형 웹 등 모바일 디자인을 효과적으로 적용하는데 필수적인 건축 구조물과 같은 요소로 부상하였다. 카드 UI를 도입하는 것은 기존 콘텐츠를 카드 프레임 내에 단순히 이관하는 것이 전부가 아니다. 성공적인 카드 UI를 적용하려면 먼저 사용자가 직관적으로 콘텐츠를 인지 할 수 있도록 콘텐츠의 본질적 특성을 고려하여 정보와 인터렉션을 디자인해야 하며 사용자 탐색을 고려해 효과적인 카드 형태를 고민해야 한다.
발췌 – 네이버 도서관
스타트업 주니어 디자이너 개월씨/도움!
https://blog.hyungsub.com/entry/%EC%B9%B4%EB%93%9C-UI%EB%94%94%EC%9E%90%EC%9D%B8-%ED%95%98%EB%8A%94-%EB%B2%95-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0
원문
카드형식의 좋은 점.
컨턴츠 덩어리 채로 분리
비슷한 속성에 맞춰서 섹션이 분리가 되어 텍스트 양을 줄이고, 정보의 조각을 하나의 유의미한 정보로 붙여준다. -> 정보 정리 전달이 잘 됨
Easy to Digest (정보 확인이 쉬움)
사용자들의 정보 접근과 인식을 도와줌.
시각적 즐거움
카드 기반 디자인은 이미지 정보에 의존적이다. 이미지는 효과적/즉각적으로 관심을 이끌어 사이트/모바일 디자인에 효과적이다.
다양한 스크린 사이즈에 잘 대응함
무한대로 확장/변형이 가능한 카드의 형식. 수비게 사이즈 업다운이 가능하여 반응형 디자인에 최적이다. 통일된 미적 요소를 제시하기 때문에 다양한 스크린에서 일관된 경험을 제공한다.
Design for Thumbs
카드는 단순하다. (*한 카드당 액션의 갯수가 정해져 있으며 글은 별로 없기 때문에 앱에 많이 쓰이는 듯) 움직이는 형태 또한 물리적으로 직관적이다.
카드 기반 디자인의 좋은 사례들
데스크톱과 모바일 플랫폼 간 경계선에 서있는 카드 디자인.
1) 지속적 정보 제공에 적합함 (stream)
끝없는 정보 매체에서 분리를 담당함. 예)페이스북
2) 정보 발견에 적합
예) 비핸스, 틴더 – 스와이핑 인터랙션 메카니즘이 스와이핑 할 때마다 정보를 새롭게 모으며 축적된 정보에 따라 사용자에게 최선의 정보를 제공한다.
3) 업무 프로세스 정리(workflow)
카테고리 작성이 쉬움. 예) 트렐로
4) 대화형 인터렉션(dialog)에 적합
카드=콘텐츠 콘테이너
예) 애플 파일 전송 요청 메세지의 팝업
5) 대시보드
정보 조직화에 유용. 덱(카드 모음)으로 발행되어 사용자들에 전달 가능
카드 기반 디자인 언어 (Card-based design language)
2010년 마소가 ‘매트로 디자인 언어 발표’ 어플리케이션들의 콘텐츠에 집중 하는 것 (플랫한 디자인, 타오포그래피, 카드)
카드 디테일 하게 디자인 하는 법
단순하게
하나의 카드, 하나의 정보. (생각보다 정보 분리가 쉽지 않음…)
카드와 반응형 디자인 (card and responsive design)
다양한 디바이스에서! 일관된 디자인!
디지털 카드는 다양한 방법으로 변형되어 적용될 수 있다. 고정된 높이를 가지고나 유동적 높이를 가질 수 있다. 고정 폭을 갖게함으로 디바이스에 따라서 높이가 유동적으로 변하게 할 수도 있다.
카드와 타이포그래피
쉽게 읽을 수 있어야 함. 가독성 최대치의 디자인 필요.
– 단순한 서체, 보기 쉬운 컬러 스키마 (병확한 배경과 텍스트의 대비값이 배치 되었을 때 가장 가독성이 좋다)
– 사실 카드 디자인 프로젝트에서 서체 하나로도 충분.
결론
트랜드는 당분간 유지될 것. 카드는 디자인 and 사용성적으로 우수한 성질을 지녔다. 복잡한 정보를 담아냄에 있어서 유동성이 우수하다. 정보를 빠르게 찾으러 하는 경향에 잘 대응하는 트랜드.
카드 UI 속 박스와 그림자를 쉽게 생성할 수 있는 : Box Shadow Art
–
모바일 앱과 웹 서비스 내 ‘카드 UI’는 이제 정말 흔하게 볼 수 있는 구성이 되었습니다. 카드의 이점은 여러 가지가 있는데요. 대표적으로 콘텐츠를 하나의 덩어리로 분리, 구분할 수 있다는 점입니다. 예를 들어 커머스에서 우리는 상품에 포함된 이름, 가격, 무료배송 등 특이 사항을 확인할 수 있는데요. 이런 정보들을 카드라는 하나의 덩어리로 구분 지어 확인할 수 있도록 도와줍니다. 하나의 카드를 규격화할 수 있으면, 다른 정보들 역시 쉽게 카드에 집어넣을 수 있으며, 사용자들은 이런 정보를 텍스트로 나열된 상태보다 더 빠르게 확인할 수 있습니다.
또, 다양한 디바이스 해상도에 대응할 수 있다는 장점이 있습니다. PC, 태블릿, 스마트폰이 모두 같은 해상도와 사이즈로 만들어졌다면 편하겠지만 실제는 정말 다양한 사이즈가 존재하는데요. 주요 콘텐츠를 카드로 구성할 경우 거의 무한대로 확장하거나 변형할 수 있어 활용이 쉽습니다. 반응형 디자인에서 카드 UI가 많이 쓰이는 이유이기도 합니다. 여러 디바이스를 통해 서비스를 이용하는 환경에서도 일관된 경험을 제공할 수 있습니다.
카드 UI에 대해 간략하게 먼저 이야기한 이유는, 오늘 소개할 서비스가 카드 UI 구성에 도움이 되는 ‘박스’와 ‘그림자’를 쉽게 생성해 코드로 만들어주기 때문입니다.
‘Box Shadow Art’는 서비스가 제공하는 샘플, 다른 사용자가 제작한 카드 또는 아예 백지상태에서 다양한 박스를 생성하고 그림자를 적용할 수 있도록 도와줍니다. 위 이미지는 기본 편집 화면으로 왼쪽으로 편집 도구가 위치하며, 오른쪽으로 편집 도구를 활용해 입력한 값에 따른 결과를 확인할 수 있습니다.
처음 서비스에 진입하면, 샘플로 제공되는 박스와 설정값을 확인할 수 있습니다. (1) 기본 제공되는 설정값을 모두 제거한 상태로 ‘Box Shadows’를 클릭하면 (2) 100여 개의 프리셋 리스트를 볼 수 있습니다. (3) 선택 시 해당 프리셋이 갖고 있는 설정값을 불러와 이어서 편집할 수 있도록 구성되어 있어요. 이후 다시 살펴볼 예정이지만, 프리셋은 물론 다른 사용자가 편집, 발행한 박스 디자인을 수정할 수 있어 백지상태에서 디자인을 하는 것보다 더 빠르게 편집할 수 있다는 장점이 있습니다. 어떻게 디자인하면 좋을지 영감을 얻을 수 있다는 점도 좋습니다.
이제 직접 편집 도구에 설정값을 변경한 결과를 확인해볼 차례입니다. (1) 가로 그림자 (2) 세로 그림자 (3) 그림자 강도 (4) 그림자 컬러 등을 직접 설정해 그 결과를 바로 확인할 수 있습니다. 위의 박스 디자인은 제가 프리셋 중 하나를 불러온 모습이며, 아래 박스 디자인은 4가지 값을 하나씩 변경한 모습이에요. 그림자 강도 등은 카드 간 정보를 조금 더 명확하게 구분할 수 있는 기준이 되기에 자주 사용하게 될 설정값이라고 할 수 있습니다.
편집 도구에서 ‘ADD NEW’를 클릭하면 또 하나의 조건을 추가해 설정할 수 있습니다. 위의 이미지는 두 개의 조건(가로, 세로 그림자 길이 및 강도와 컬러가 한 세트)을 조합해 박스 디자인을 제작한 모습입니다. 이렇게 한 세트의 조건을 추가하다 보면 여러 컬러나 강도에 따른 디자인 결과를 확인할 수 있습니다.
편집 도구를 통해 박스 디자인을 완성하면, ‘GET THE CODE’버튼을 클릭 해 코드를 확인할 수 있어요. 복사하기 버튼을 통해 코드를 복사, 원하는 곳에 붙여 넣어 활용할 수 있습니다. 쉽게 디자인하고, 그 결과를 서비스 내 적용할 수 있는 과정을 모두 진행할 수 있어 더 유용하게 느껴집니다.
‘Box Shadow Art’는 크게 두 가지 메뉴로 구성되어 있습니다. 하나는 ‘Generator’라는 박스 디자인 생성 및 편집 메뉴이며, 또 하나는 ‘Inspiration’이라는 다른 사용자가 생성한 박스 디자인 갤러리 메뉴입니다. 위 이미지는 ‘Inspiration’메뉴로 진입했을 때 처음 만나게 되는 모습이에요. 앞서 살펴본 프리셋과는 또 다른 느낌으로 제작자의 개성이 담겨 보는 즐거움이 있어요.
이렇게 갤러리를 둘러보다 마음에 드는 박스 디자인이 있다면 ‘Edit’버튼을 클릭, 편집 화면으로 바로 이동할 수 있어요. 코드를 바로 복사하는 것도 가능합니다. 운영자가 피처드 한 박스 디자인이나, 다른 사용자가 ‘좋아요’한 내용도 함께 볼 수 있습니다. 직접 박스 디자인을 생성하는 것도 좋지만, 이렇게 누군가 만들어 공개한 박스를 편집해 활용하는 것도 원하는 결과를 빠르게 만나볼 수 있는 방법이라고 생각해요.
정리해보면 카드 UI의 핵심인 박스 디자인을 손쉽게 만들 수 있는 곳으로, 직접 만들거나 프리셋과 갤러리를 통해 제공되는 디자인을 편집하는 등 세 가지 방법을 활용할 수 있습니다. 디자인 툴을 통해 생성하는 것보다 더 빠르게 제작할 수 있다는 장점이 있어요. 툴은 다른 것을 활용하더라도, 갤러리를 통해 제공되는 여러 사례를 통해 영감을 얻을 수 있으니 상황에 따라 활용하시면 많은 도움을 받으실 수 있을 거라 생각합니다! (서비스 자세히 보기)
–
함께 활용하기 좋은 서비스 : CSS Scan
이곳에선 앞서 살펴본 서비스와 같이 ‘박스 디자인’을 직접 생성하거나 수정하기 어렵지만, 93개의 박스 샘플을 살펴볼 수 있습니다. 정방형으로 설계된 다채로운 박스 디자인을 하나씩 살펴보며 원하는 예제를 찾아 활용할 수 있어요. 트렐로, 스케치 등 특정 서비스에서 사용되는 경우 별도 표기가 되어 있어 참고하기 좋습니다.
마음에 드는 샘플이 있다면, 클릭을 통해 코드를 간단하게 복사할 수 있습니다. 복사한 코드는 원하는 곳에 붙여 넣어 적용할 수 있으며 컬러 값 등을 코드 내 직접 수정하는 방법으로 기본값을 변경하는 것이 가능해요. ‘Box Shadow Art’가 직사각형의 박스 디자인에 초점이 맞춰져 있으며, 프리셋이나 갤러리 내 등록된 내용들 역시 같은 모양을 하고 있기에 정방형의 박스 디자인을 바로 확인하고 싶다면 이곳을 함께 활용하는 것이 좋은 방법이 될 수 있을 것 같습니다. (서비스 자세히 보기)
–
함께 활용하기 좋은 서비스 : Copy Paste CSS
‘CSS Scan‘과 같이 다양한 박스 디자인 예제를 확인할 수 있는 곳입니다. 다른 점이 있다면, 머터리얼 디자인 등 특정 디자인 시스템이나 서비스에서 사용되는 박스 디자인을 구분에 따라 확인할 수 있다는 점입니다. 또 해당 박스 디자인이 포함된 디자인 시스템 웹페이지로 바로 이동할 수 있는 링크가 제공되어 함께 살펴볼 수 있다는 장점이 있습니다.
여럿 제공되는 박스-그림자 디자인 중 마음에 드는 샘플이 있다면 클릭 후 코드를 복사할 수 있습니다. ‘CSS Scan‘와 함께 활용할 경우, 어떤 서비스와 시스템에서 어떤 박스 디자인을 활용하고 있는지 참고자료로 활용할 수 있으며, 처음 소개한 ‘Box Shadow Art’에서 유사한 스타일의 박스 디자인을 직접 생성할 때 코드를 복사해 활용할 수 있습니다. (서비스 자세히보기)
–
함께 활용해보세요!
–
When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.
35개의 카드UI 아이디어 | 카드, 웹디자인, 레이아웃
Stylish Instagram Templates Bundle by Pretty Bloom Designs on @creativemarket #ad Time for an Instagram Makeover in 2018? Display your photos, promotions and content beautifully with this stylish and modern instagram bundle. This pack is perfect for creating a cohesive social media presence for your blog, business or brand. Change Colors, Text and Add Your Own Images! This bundle is highly versatile with a range of layouts to suit your marketing. #socialmedia #blogging #marketing #design
키워드에 대한 정보 카드 ui
다음은 Bing에서 카드 ui 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 모바일 카드형UI 디자인 작업과정[어도비XD]
- Photoshop
- Illustrator
- XD
- web design
- UIUX design
- app design
- icon design
- logo design
- Graphics
- font
- jyp
- 포토샵
- 일러스트
- 어도비xd
- 디자인
- 로고
- UIUX
- 마디아
- 포트폴리오
- 아이콘
- 디자이너연봉
- Portfolio
- 포토샵강의
- 일러스트강의
- 인하우스
- 에이전시
- 취업
- 웹디자인 포트폴리오
- 웹디자인 노트북
- ux디자이너
- 모바일 ui 디자인
- 디자이너
- typographics
- 배너디자인
- 그라디언트
- 웹디자인
- 앱디자인
- 모바일디자인
- 캘리그라피
- 컬러
모바일 #카드형UI #디자인 #작업과정[어도비XD]
YouTube에서 카드 ui 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 모바일 카드형UI 디자인 작업과정[어도비XD] | 카드 ui, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.