본문 바로가기

디자인 리서치

아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기 체계화와 유지관리와 구현 상의 효율성 등의 이유로 컴포넌트 단위의 UX디자인이 각광받기 시작했고, 이는 디자인시스템이라는 형태로 이전까지 화면 단위로 보여지던 디자인의 산출물이 변화하고 있습니다. 이러한 변화는 디자인 분야에서만 나타나는 변화의 현상이 아닌 프론트엔드 개발 분야에서의 기술 변화도 비슷한 형태의 변화 흐름을 보여주고 있습니다. 리액트나 뷰, 앵귤러 등 모던 프레임워크들이 컴포넌트 별로 분리된 개발을 지원하는 것이 그러한 양상 중 하나라고 볼 수 있습니다. 이러한 배경 하에 주목받는 디자인 방법론 또는 개념으로서 '아토믹디자인(Atomic Design)'을 들 수 있습니다. 본 포스트에서는 아토믹디자인이라는 방법론의 간략한 범위 내에서 기본 개념을 파악하고 이를 응용할 수 있는 방법에 대해서..
좋은 대시보드 디자인의 10가지 원칙 (2019) 본 포스트는 Saadia Minhas가 2019년 11월 27일에 작성한 10 Rules of Dashboard Design 포스트를 지식을 널리 알리기 위한 목적으로 번역하여 작성한 글입니다. 저작권 및 내용에 문제가 있을 시 연락을 주시면 그에 적절한 조치를 취하겠습니다. 왜 대시보드 디자인이 중요한가요? 대시보드는 정보를 시각화하는 역할을 합니다. 특히 복잡한 정보들의 집합체를 사용자들이 이해하기 쉬운 포맷으로 전달하는 것이 이것의 목적이라고 볼 수 있습니다. 사용하기 좋은 대시보드는 1) 명확해야합니다 좋은 대시보드는 요청된 정보를 명확하게 표현해야 합니다. 사용자가 대시보드를 볼 때 사용자는 5초 안에 대시보드의 용도를 확인할 수 있어야 합니다. 사용자를 몇 분간 머무르면서 대시보드의 용도를 확..
펜타그램이 디자인한 야후의 새로운 로고 우리에게는 잊혀진 브랜드이지만, 실제 야후는 미국에서 계속 운영되고 있는 서비스이며 실제로 트래픽도 적지 않게 발생하는 생존(?)하고 있는 서비스입니다. 하지만 전반적으로 하향세를 그리는 혹은 노인들만이 주로 찾는 서비스와 같은 부정적인 이미지들이 있었는데, 이를 타개하기 위해 경영자도 바꾸고 다양한 기업들도 인수하고(텀블러, 플리커 등) 했지만 기대했던 만큼의 큰 변화는 없었던 것 같습니다. 그러던 와중 야후의 브랜드 리디자인 소식이 들려 왔는데요, 영국의 글로벌 디자인스튜디오인 펜타그램에서 작업했다고 합니다. 이 변화가 야후의 새로운 변화를 리드할 수 있을지 주목해 봐야할 것 같습니다. Pentagram Pentagram 펜타그램의 소개를 보면, 최근 다른 로고들의 추세와 같게 다양한 플랫폼과 환경에..
국내외 정보보안 및 B2B IT 업체 CI, BI 디자인 모음 (2017년 초 기준) 지란지교소프트의 주된 사업 분야 중 하나인 정보보안 및 B2B IT 분야에는 국내외 많은 업체들이 다양한 사업을 펼치고 있습니다. 이 업체들 모두 각자의 디자인 전략을 가지고 고객과의 커뮤니케이션을 진행하고 있는데요. 디자인팀에서는 정보보안 및 B2B IT 업계의 전반적인 디자인 동향을 알아보는 차원에서 각 업체들의 CI 및 BI를 조사하는 시간을 가져 보았습니다. 특별한 인사이트가 담긴 조사 자료는 아니지만, 말 그대로 업계 디자인 동향을 파악하는 자료로 참고해 주시면 감사하겠습니다. 해당 조사 자료는 2017년 1월의 자료를 근거로 제작되었습니다. 국내 정보보안 및 B2B IT 분야 CI 및 BI 모음 (2017년 초 기준) 해외 정보보안 및 B2B IT 분야 CI 및 BI 모음 (2017년 초 기준)
2016년 가을 공개된 구글 애널리틱스의 새로운 UI디자인 구글 애널리틱스를 이용하시는 분들은 얼마 전부터 UI 최상단에 곧 공개될 새로운 UI를 확인할 수 있는 페이지를 연결시켜 놓았습니다. 해당 페이지로 이동하면 주요 변경 화면에 대한 스크린샷을 제공하고 있습니다. 더불어서 곧 공개될 기업용 유료 서비스인 'Google Analytics 360'에 대한 소개도 함께 기재되어 있습니다. 이번 포스트에서는 세계에서 가장 널리 사용되는 관리자사이트(Admin Website) 중 하나인 구글애널리틱스의 곧 공개될 새로운 UI디자인에 대해 간략히 알아 보겠습니다. 리뉴얼 이전 구글 애널리틱스의 UI디자인 1. 단순화된 네비게이션새로운 구글 메테리얼 디자인 표준을 따릅니다.관리자 관련 서브헤더가 사라지고, 해당 내용은 네비게이션 최하단에 고정했습니다.좌측 네비게이션은 ..
디자이너라면 반드시 봐야할 7가지 TED 강연 영상 *본 포스트는 "Invision Blog'에 게재된 "THE 7 TED TALKS EVERY DESIGNER SHOULD WATCH (PLUS ONE FOR FUN)"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다. TED Talk의 1984년의 첫번째 강연 이후, TED는 우리들에게 깊은 감명을 주며 생각할 거리들을 건내주고 있습니다. 이 중 디자인에 관련된 300개 이상의 TED 강연 중 빠트려서는 안 될 강연들을 뽑기로 했으며, 트위터리안들의 도움을 통해 7가지 강연을 추릴 수 있었습니다. (해당 강연들을 한글자막이 있을 경우한글자막이 달린 버전으로 링크를 달아 두었습니다.) 1. 좋은 디자인이 당신을 행복하게 만드는 3가지 방식 by ..
UI디자인가이드(스타일가이드,개발가이드,디자인명세) 만들기 (2016년 기준) (내용수정) (내용수정, 2019-09-18)본 글은 2016년에 기재된 비교적 오래된 내용을 담은 포스트입니다. 관련 내용을 2019년 09월 기준으로 추가 드립니다.아래 소개된 툴들은 이제 거의 사용되지 않습니다.UI디자인가이드 제작에 있어 '제플린'이라는 디자인명세 및 핸드오프 툴이 거의 업계 표준으로 자리잡았습니다.그 외의 일부 기업에서는 전통적인 파워포인트를 여전히 활용하고 있습니다.그사이 명세적 측면보다 디자인의 구체적 활용안 및 컴포넌트화를 다루는 '디자인시스템'이라는 확장된 개념이 등장했습니다.용어의 모호성은 여전합니다. 디자인가이드, 디자인명세, 스타일가이드, 디자인규격 등 혼용되고 있는 상황입니다.UI디자인가이드, 디자인명세, 스타일가이드 등의 각 용어에 대한 의미성과 프로젝트 상황에 맞춰 사용하시..
'저장' 아이콘을 바꿀 수 있는 방법은 없을까? *본 포스트는 "Medium'에 게재된 Seth Coelen의 "A Better Save Icon"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다. 플로피디스크 모양의 '저장' 아이콘은 일종의 '근시안적' 아이콘 디자인의 사례라고 볼 수 있습니다. 최근의 어린 친구들은 플로피디스크가 무엇인지 조차 알지 못하기 때문입니다. 이제는 이 '저장' 아이콘을 보다 오랜 기간 동안 통용될 수 있는 아이콘으로 새로 디자인되어야 할 때가 아닌가 싶습니다. 물론 이것은 매우 어려운 일로 보입니다. 다음은 새로운 저장 아이콘을 만들기 위해 저를 포함한 여러 디자이너들이 노력한 결과를 공유 드립니다. Piggy Bank by Ricardo Moreira돼지 저금..