본문 바로가기

UI

(22)
게임에서 UI/UX 아이디어를 얻을 수 있다고? [주간챙스] 비디오 게임 UI 트렌드를 웹사이트 디자인에 응용하는 법 안녕하세요. 슬로워크 마케팅/기획 인턴 챙스입니다. 저희는 ‘디자인과 기술을 활용해 소셜섹터의 영향력을 확대하고, 사회에 긍정적인 영향을 끼친다’는 미션 아래 웹사이트 및 플랫폼 제작, 디지털 마케팅 전략 설계, IT 교육 및 컨설팅을 하고 있어요. UI/UX, 디지털 마케팅 트렌드는 빠르게 변화하기 때문에 디자인과 기술을 통해 사회를 바꾸려면 꾸준히 공부해야 합니다. 하지만 영문 콘텐츠가 아무래도 많다 보니 번역을 거쳐 봐야 한다는 불편함이 있어요. 그래서 ‘주간 뉴스레터 정리’를 시작했습니다. 실무에 몰두하는 기획자, 개발자, 디자이너를 위해 시시각각 변하는 트렌드를 담은 아티클을 일주일에 하나씩 번역 정리한 후, 좋은 정보가 있다..
헷갈리는 UI, 스티비는 이렇게 씁니다 세상에 온전하게 혼자 만든 물건은 매우 드뭅니다. (풀스택이라는 개념도 있지만) 웹서비스 역시 여러 사람의 협업으로 만듭니다. 슬로워크에서 운영하는 이메일마케팅 서비스 스티비도 예외는 아닙니다. 살짝 말씀드리면 스티비는 기획/PM 1명, 디자이너 1명, 개발자 2명이 만들고 있습니다. 큰 조직은 아니지만 소통의 틈은 늘 존재하기 마련입니다. 그중 하나가 UI 용어입니다. 동상이몽이라는 말처럼 각자 웹서비스 개발을 해왔지만, 모두가 같은 상황과 맥락에서 학습한 것이 아니고, 머릿속에 그리는 이미지가 달라 사용하는 용어가 서로 다를 수 있습니다. 그리고 같은 용어를 사용하면서도 그 의미와 구현된 결과물이 다를 수 있습니다. “‘드롭다운'이 들어가야 해요"라고 요청받고 나온 결과물은 ‘버튼을 클릭하면 아래로 ..
UI 디자인에서 영문 타이포그래피 잘 쓰는 법 이 글은 폴란드의 디지털 에이전시인 inFullMobile의 UX/UI디자이너인 Wojciech Zieliński가 작성한 "How to use typography in UI Design"을 번역하여 작성하였습니다(원저자에게 허락을 받았으며, 의역이 있습니다). 들어가며타이포그래피는 UI 디자인에서 가장 어려운 부분이라해도 과언이 아닙니다. 우리는 오랫동안 다양한 방식으로 타이포그래피 작업을 해온 결과로 여러 규칙, 이론과 실제를 경험하게 되었는데요. 이 글에서는 따로 작업이 어려운 분들을 위해 프로젝트에 사용할 수 있는 몇 가지 실용적인 팁과 비결을 알려드리겠습니다. 예시로 보여드릴게요타이포그래피는 재미있는 주제이긴 하지만, 이론적인 부분을 얘기하지는 않겠습니다. 문자 해부학이나 활자보다 바로 적용가능..
코알못의 스케치 플러그인 개발 도전기 (2) - 만들기 이 글은 코알못의 스케치 플러그인 개발 도전기 (1) - 시작하기에서 이어지는 글입니다. 지난 글에서는 스케치(Sketch) 플러그인을 개발하기 위해 플러그인의 구조와 플러그인 개발을 위해 필요한 것들을 알아봤습니다. 이제 만들어보겠습니다. 스케치는 MacOS용 애플리케이션이며 플러그인도 MacOS에서만 개발할 수 있습니다. 이 글도 MacOS를 기준으로 작성됐습니다.이 글은 스케치 플러그인 개발 방법을 설명하는 글이 아니라 말그대로 ‘개발 도전기'입니다. 코딩을 모르는 사람도 간단한 스케치 플러그인을 개발할 수 있다는 것을 전달하기 위한 것입니다.코알못의 스케치 플러그인 개발 도전기 (1) - 시작하기를 먼저 읽어보는 것을 권장합니다. 뭘 만들지? 개발 과정이 순탄하지 않겠지만, 가장 먼저 뭘 만들지 ..
코알못의 스케치 플러그인 개발 도전기 (1) - 시작하기 슬로워크의 스티비 팀에서는 디자인 작업을 할 때 스케치(Sketch)를 적극적으로 활용하고 있습니다. 와이어프레임을 만드는 일부터 GUI를 입히고 간단한 아이콘을 만드는 일까지, 스케치로 시작해서 스케치로 끝난다고 할 수 있을 정도입니다. 스티비 팀이 쓴 스케치 관련 글기획자의 스케치(Sketch), 인비전(Invision) 사용기스케치(Sketch)와 어도비(Adobe) XD, 어떻게 다를까? 스케치로 작업 중인 새로운 스티비의 와이어프레임(좌)과 GUI(우) 스케치를 사용하다보면 가끔씩 ‘이런 기능도 있으면 참 좋을텐데'하는 생각이 들 때가 있습니다. 이런 부족함을 충족시켜주는 것이 스케치의 플러그인*입니다. 스케치 외에도 대부분의 유사한 애플리케이션들(포토샵, 일러스트레이터 등)이 플러그인 기능을 ..
스케치(Sketch)와 어도비(Adobe) XD, 어떻게 다를까? 올 초 인터랙션 디자이너로 스티비에 합류하면서 어도비(Adobe)를 벗어나 다양한 프로토타이핑 툴을 사용했습니다. 그 중 가장 선호하는 툴은 스케치(Sketch)로, 새로 리뉴얼하는 스티비의 90% 이상을 스케치 기반으로 만들고 있습니다. 처음에는 왜 스케치를 쓰는 디자이너가 많아지는 걸까? 의문이 들었는데요. 스케치를 쓸수록 반복적인 업무가 효과적으로 단축되고 협업할 때 편리해서 제게도 다른 툴을 제치고 가장 많이 사용하는 툴로 자리잡았습니다. 지난해, 디자이너 툴 서베이 결과에 따르면 조사 대상자 중 스케치 사용자가 34%, 포토샵 사용자는 29%로 스케치 유저가 포토샵 사용자보다 많았습니다. 기존 유저 중 절반을 스케치에 빼앗겨버린 어도비가 안쓰러울 정도였는데요. 이렇게까지 유저들이 포토샵에서 스케..
UX, UI, 인터랙션? 나는 어떤 디자이너일까? ‘디자이너’라는 용어는 매우 광범위하고도 애매하게 쓰이고 있습니다. 그 종류만 해도 제품 디자이너부터 편집 디자이너, 웹, 모바일 디자이너까지 다양합니다. 특히 스크린 기반의 인터페이스 디자이너인 UI, UX의 개념은 디자이너조차 혼돈에 빠뜨립니다. 오늘 포스팅에서는 이렇게 헷갈리는 기술/미디어 기반 디자이너의 역할에 대해 살펴보고자 합니다. 우선 사전적 정의를 살펴보면 아래와 같습니다. 사전적 정의 (출처: 두산 백과, 미디어 백과) 비슷한 것 같으면서도, 비슷하지 않은 듯한 느낌입니다. 흔히 UI는 그래픽 디자인을 기반으로 시각적인 부분을 담당하고, UX는 프로토타이핑 툴과 관련이 깊은 정도로 알고 있습니다. 그렇다면 누가, 어떻게 이 불명확한 개념을 명확하게 정의할 수 있을까요? 해답은 사전이 아닌..
버튼이 사라진 앱 우리는 앱이나 서비스를 사용할 때 다양한 시각 요소들을 마주하게 됩니다. 화면을 스크롤하거나 버튼을 클릭하여 앱이나 서비스에게 원하는 바를 전달하죠. 예를 들어 캘린더에 일정을 추가한다면, 이런 일련의 행동은 사용자와 기계가 상호작용하는 과정입니다. 기계가 의도를 이해하기 쉽도록, 그리고 기계에게 의도를 전달하기 쉽도록 시각적으로 표현된 UI를 사용하는 것이죠. 하지만 기계가 우리의 언어를 이해하고 우리와 대화할 수 있다면 어떻게 될까요? 화면을 스크롤하거나 버튼을 클릭할 필요없이, 우리가 원하는 것을 앱이나 서비스에게 “이야기"하게 될 것입니다. 예를 들어 캘린더와 대화하며 일정을 추가한다면, 이렇게 대화를 통해 기계와 상호작용하는 것을 “대화형(Conversational) UI”, “대화형 인터페이스..