UI & UX23 플랫 UI 디자인과 브랜딩 전략 초기 iOS의 skeuomorphism 이후에 최근 플랫 UI 디자인은 미니멀한 디자인이 대세가 되면서 시각적 설계의 기본처럼 자리를 잡아왔습니다. 플랫 UI 디자인이 가지는 장점은 용이한 시각적 위계 설계, 효율적인 디자인 리소스 생산 등으로 빠른 개발에 용이한 부분이 있습니다. 그런데 요즘같이 앱이 생활의 모든 분야에서 사용되면서 미니멀한 플랫 UI 디자인이 가지는 문제가 발생하는 거 같습니다. 바로 미니멀한 표현 방식 때문에 브랜드가 가지는 특징 및 방향성을 시각적으로 전달하는데 한계가 생깁니다. 로고 및 UI가 단순하다 보니 앱이나 서비스가 많이 없던 시절에는 괜찮았지만 요즘같이 앱이나 서비스가 범람하는 시점에서는 시각적인 요소가 거기서 거기인 느낌입니다. 쉽게 말해서 서비스가 눈에 띄지 않는 문.. 2024. 1. 30. UI 라이브러리와 디자인 시스템 요즘 UI 디자이너 채용 관련해서 JD를 보면 항상 빠지지 않는 단어가 "디자인 시스템"입니다. 저는 커리어 초기에 개발자분으로부터 디자인 시스템의 개념을 알게 되었고, 생산성을 위해 필수라는 생각을 가지고 프로젝트를 진행하면서 항상 전체 혹은 부분적으로 적용하였습니다. 먼저 디자인 시스템의 목적을 디자인, 개발 영역에 맞춰서 정리하겠습니다. 디자인에 있어서 디자인 시스템은 생산성 및 브랜딩에 있다고 생각합니다. 오늘의 주제가 UI 라이브러리 관련이라 간략하게 설명하자면, 피그마라는 툴의 등장으로 디자인 자체의 생산성이 크게 향상되었습니다. 피그마의 기능들이 디자인 시스템에 딱 맞을 정도로 설계가 되어있고, 비교적 최근에는 local variables의 추가로 동적인 디자인 변경 및 프로토타이핑도 가능해.. 2024. 1. 16. AI 시대 그리고 UI/UX 디자이너의 미래 피그마 업데이트 혹은 로드맵을 꾸준히 챙겨보시는 분은 아시겠지만 피그마가 생성형 AI 기능 추가를 예고해 놓은 상황입니다. 피그마는 대부분의 UI/UX 디자이너 혹은 디자이너와 협업하는 직군에서 생산성에 주안점을 두시는 분들도 많이 사용하는 툴입니다. 그렇기 때문에 AI 기능 추가로 인한 파급력이 있을 거라 예상됩니다. 그럼 각 UX 하위 파트에 미치는 영향 및 UI/UX 디자이너는 어떻게 대처해야 하는가에 대한 주제로 작성해 보겠습니다. 1. Interaction 생산자 입장에서는 인터랙션 부분인 유저 인터페이스가 가장 크게 영향받는 부분이라고 생각합니다. 피그마의 생성형 AI 기능의 성능이 어느 정도인지는 모르겠지만 프롬프트를 잘 다루고 기획적인 역량이 받쳐주는 사람이 사용한다면 극단적인 경우 UI .. 2024. 1. 7. 유저 경험의 종류 UX 디자이너가 아니라면 UX에 대한 오해를 가지는 경우가 많은데 위의 동영상을 통해 어느 정도 해소가 가능할 거 같아서 저의 견해를 정리할 겸 글을 작성합니다. 일단 영상의 제목은 Types of User Pain Points인데, 글의 제목은 유저 경험의 종류라서 매칭이 되지않을수 있습니다. 하지만 페인 포인트를 특정 영역에서 해소한다는 점에서 반대로 생각하면 유저 경험의 종류로도 생각할 수도 있을 거 같습니다. 영상에서는 크게 3가지로 분류를 하는데 아래와 같습니다. Interaction Level - 상호작용 Journey Level - 여정 Relationship Level - 관계 상호작용은 말그대로 서비스와 사용자가 상호작용하는 단계이며, 전체 경험의 단계에서 초입에 해당합니다. 보통은 애플.. 2022. 10. 1. UI/UX 디자이너가 알아두면 도움되는 네 글자 눈치 빠른 분이라면 네 글자에서 알아채셨을 텐데요. 바로 CRUD입니다. 데이터 베이스를 다루는 직군에서 자주 사용하는 걸로 아는데요. UI/UX 디자이너가 알아두면 왜 도움이 되는지 설명해보겠습니다. CRUD는 각 단어의 앞글자를 따서 만든 약자이며, 4개의 단어는 아래와 같습니다. Create - 생성 Read - 읽기 Update - 갱신, 수정 Delete - 삭제 감이 좋으신 분이라면 4개의 순서가 데이터가 생성되고 삭제되는 일련의 과정인 것을 아셨을 텐데요. 결국 하나의 데이터가 생성되고, 조회 및 수정이 가능하고, 삭제되는 과정이 결국 인터페이스 상에 구현이 되어야 합니다. 그래서 디자이너는 특정 요소가 생성이 된다면 나머지 과정도 빠짐없이 정보 구조 및 화면 설계에 포함을 시켜야 합니다. .. 2022. 9. 13. UI/UX 디자인 프로세스 이 글에서는 지금까지 주로 스타트업에서 일하면서 얻은 좋았던 혹은 나빴던 경험을 토대로 UI/UX 디자인 프로세스를 정리해보겠습니다. 참고로 스타트업 특성상 디자인 사수 혹은 팀원 없이 진행한 것을 전제로 합니다. 앞서 개요를 정리하자면 "개념화 - 구체화 - 시각화 - 실체화" 이 순서로 진행하겠습니다. 1. 개념화 쉽게 생각하면 프로덕트의 컨셉입니다. 타겟 유저는 누구이며, 제품의 핵심적인 키 펑션, 제품의 방향성을 설정하는 단계입니다. 대부분은 스타트업의 대표 혹은 결정권자가 간단하게 정리를 한 상태에서 디자이너 채용을 진행하기 때문에 제가 적극적으로 개입한 경험은 적습니다. 보통은 채용 면접에서 프로덕트의 비전과 미래를 설명하면서 간단하게 개념을 설명하는 경우가 많은데요. 이런 개념화 과정을 거쳐.. 2022. 8. 30. 피그마에서 다국어화 처리 요즘 채용 공고를 보면 가끔 우대사항에 다국어화 처리에 대한 요구가 보이는데요. 이번에는 피그마에서 더미 데이터 관리에 많이 쓰이는 플러그인 Google Sheets Sync를 활용해서 다국어화 처리를 간단하게 하는 방법을 정리하겠습니다. 플러그인에 대한 기본적인 정보는 아래의 링크를 확인해주세요. 플러그인 소개 페이지 Google Sheets Sync | Figma Community Figma Community plugin - Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google • It is simply created with ❤️ by David Will.. 2022. 8. 25. Figma - 인터랙티브 컴포넌트 최근에 피그마에 인터랙티브 컴포넌트란 기능이 추가되었는데요. 꽤 오래전에 베타 테스트를 진행해서 사용해봤지만, 베타인 이유도 있고, 프로젝트 중간에 적용하는 건 리스크가 많아서 적극적으로 사용해보지는 않았습니다. 빨리 정식 버전에 추가되기를 기다리다가 이번에 정식으로 지원하게 되어서 포스트를 남겨봅니다. 디자인 시스템에 친숙한 디자이너에게는 혁신적인 기능이라고 생각합니다. 기존에는 인터랙티브한 장면을 만들기 위해서는 그에 대응되는 경우의 수 혹은 화면(프레임)을 모두 만들어야 돼서 리소스 소모도 심하고 관리 측면에서도 힘든 부분이 많았습니다. 하지만 인터랙티브 컴포넌트를 통해서는 하나의 화면만 있어도 인터랙티브 한 컴포넌트 구현이 가능합니다. 개발에 친숙한 디자이너 시라면 DOM과 Virtual DOM의.. 2021. 11. 2. "UX디자이너" 디자이너로서 요즘 채용공고를 쭉 보다 보면 "UX 디자이너"라는 포지션을 많이 보게 된다. 예전에는 보통 UI/UX 디자이너, UI 디자이너였지만 근래에는 UX/UI 디자이너, UX 디자이너로 적는 게 유행이 아닐까 할 정도로 많이 보게 된다. 단순하게는 단어의 배열을 바꿔서 'UI보다는 UX가 중요하지~'라는 느낌을 받게 된다. 이런 현상은 예전부터 UX라는 단어가 유행하기 시작하면서 UI가 먼저냐 UX가 먼저냐라는 토론이 간혹 보이곤 했는데 '엄마가 좋아, 아빠가 좋아'급의 질문처럼 개인적으로는 느껴진다. 그렇다면 UX라는 게 뭘까 대부분 알겠지만 UX는 사용자 경험의 약자이고, 디자인에서의 의미를 풀어보자면 사용자 중심 디자인이다. 이걸 굳이 또 풀어서 해설하자면 서비스 혹은 제품을 사용자의 입장에.. 2021. 6. 30. 와이어프레임은 쓸모없다 uxdesign.cc/wireframes-are-useless-14ac7d22c961 Wireframes are useless Why we stopped using them and how it improved the way we design uxdesign.cc 위의 링크는 이글의 주제가 있는 원문이고, 이 글은 번역보다는 아티클에서 제시하는 주제에 대해서 개인적인 의견을 정리할 겸 글을 작성합니다. 일단 와이어프레임의 의미부터 정리하자면 서비스의 구조와 기능을 시각적으로 나타내는 것인데요. 대개는 두가지로 나뉩니다. low-fidelity(저밀도) : 시각적인 요소의 밀도가 낮은걸 의미하며, 간단한 스케치로 만드는걸 의미합니다. high-fidelity(고밀도) : 시각적 요소의 밀도가 높은걸 의미하며.. 2020. 12. 20. 디자이너가 API와 친해져보기 API가 뭐야? 개발자분들과 협업을 하다 보면 API라는 단어를 많이 들으실 텐데요. 느낌적으로는 이해하셨을 텐데 정확한 의미에 대해서는 모르실 수도 있다고 생각합니다. 일단 API의 약자는 Application Programming Interface입니다. 어플리케이션은 알겠고, 프로그래밍 인터페이스라니.. 그냥 개발자가 사용하는 인터페이스 아닌가요?라고 생각할 수도 있습니다. 그리고 GUI같이 예쁘게 인터페이스가 있는 것도 아니고 뭔가 확 와 닿지 않게 되죠. GUI의 인터페이스든 API의 인터페이스든 쉽게 생각해서 인터페이스는 "도구"라고 생각하면 좋을 거 같습니다. 주로 사용하는 주체가 유저인지 프로그래머인지 정도의 차이겠죠. 특히 초기에 기획까지 담당하는 디자이너라면 애플리케이션에서 제공하는 ".. 2020. 11. 23. IA란 무엇인가 개인적으로 UI/UX 디자인을 하는 데 있어서 가장 중요한 게 무엇이냐는 질문을 받는다면 고민 없이 IA라고 말할 수 있습니다. 보통 UI/UX 관련 강의나 튜토리얼을 보시면 처음에 짧게 언급되고 지나가는 그것입니다. 일단 IA는 Information Architecture의 약자이며, 번역하자면 정보 구조로 번역됩니다. 방금 언급했듯이 UI/UX 관련해서 주로 처음에 언급되는 내용이며, 이는 가장 기초적이고 기반이 되는 것이라는 의미이기도 합니다. 요즘은 모르겠지만 제가 UI/UX 디자이너를 시작할 당시만 해도 거의 무시되거나 형식만 갖추는 프로세스의 일부였습니다. 주로 디자이너의 입장보다는 결정권자의 무지에서 비롯한 것이 많았던 거 같습니다. 1. IA의 목적 본격적인 설명으로 들어가면 요즘 새로 나.. 2020. 8. 10. 2020 UI/UX 디자인 툴 스택 원문 : https://uxdesign.cc/designers-tech-stack-of-2020-1df2e1203638 Designers tech stack of 2020 We’re apporaching the end of the decade and a lot has happened in UX, HCI and Interaction design during the last ten years. Especially… uxdesign.cc 미디움을 둘러보다가 UI/UX 디자인 툴에 관한 아티클을 보고 정리 및 의견을 목적으로 작성합니다. 저는 원래 모션그래픽을 했었고, 툴을 배우는 속도는 빠르다고 자부하기 때문에 그리고 지금까지 여러 가지 툴을 다뤘던 경험이 있다 보니 도움이 그다지 되지는 않을까 했는데 생각보.. 2019. 12. 22. 서비스 경험기 - 집토스 참고로 각잡고 찾아보느라 PC에서만 사용해봤습니다. 최근에 급하게 이사를 하게 되는 바람에 집을 구하던 중에 집토스를 사용하게 되었는데요. 원래는 피터팬에서만 찾아보다가 매물이 적다는게 느껴져서 집토스도 한번 사용해봤습니다. 일단! 회원가입이 간단한 편이었습니다. 그래서 아무생각없이 서비스에 접근하는데 크게 무리는 없었습니다. 개인적으로 소셜 로그인에 구글도 있었으면 좋았겠지만 페이스북만으로도 충분할듯 합니다. 그리고 우연찮게 버그를 발견했는데요. 전체 메뉴 -> 로그인 -> 회원가입을 누르게 되면 [X 메뉴닫기] 메뉴가 사라지더군요. 보편적인 현상인지는 모르지만 일단 저한테는 발생하는 문제였습니다. 참고로 클라이언트는 크롬이었습니다. 다른 영역을 클릭했을때 자동으로 닫히는 이벤트도 없었던거 같아서 새로.. 2019. 12. 11. 진정한 반응형 폰트사이즈 개인적으로 미디어 쿼리로 폰트 사이즈를 정리하는 건 굉장히 불편하고 관리 포인트가 많이 늘어난다고 생각합니다. (특히 반응형 사이트!) 그렇기 때문에 디자인과 최종 결과물이 다르게 나오더라도 어느 정도 이해하는 편입니다. 퍼블리싱이 되고 만약 폰트나 텍스트 관련해서 수정이라도 발생하면 결과물이 점점 산으로 가거나 작업 시간도 늘어나고 관리도 힘들어집니다. 그렇기 때문에 실제 디자인된 사이트를 둘러보면 PC, Mobile 뷰 정도만 적극적으로 지원하는 경우가 많습니다. 그러나 앞으로 지원해야 할 디바이스의 비율이나 해상도가 다양(최근에 나온 갤럭시 폴드의 경우 거의 태블릿 정도)해질거라고 생각합니다. 결국엔 PC, Tablet, Mobile 뷰는 기본으로 지원해야 하며 세세하게 분류가 될 가능성이 높습니다.. 2019. 11. 6. Lorem Ipsum이란 무엇인가 디자이너나 디자이너와 협업을 많이 하는 직종에게는 친숙한 Lorem Ipsum(이하 로렘 입숨)이지만 그 외에는 친숙하지 않기 때문에 간단하게 그리고 로렘 입숨을 많이 사용하는 입장인 제가 실무에서 느낀 점을 써보도록 하겠습니다. 관련이 전혀 없는 분들도 상식으로만 알고 계셔도 좋을듯합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 가장 기본이자 첫 문장입니다. 길이는 짧을수도 굉장히 길 수도 있으며, 의미가 없는 라틴어 문장으로 생각하시면 됩니다. 디자인에서는 주로 컴포넌트나 페이지에 텍스트는 넣어야 하지만 딱히 정해지진 않았고 디자인은 완성을 해야 할 때 주로 넣는 용도로 생각하시면 됩니다. 다르게 말하면 더미 데이터라고 할 수도 있지만 실.. 2019. 11. 4. Lottie란 무엇인가 롯데가 아닌 로티입니다. 🙄....다들 에어비앤비는 들어보셨을 텐데요. 바로 에어비앤비에서 개발한 라이브러리입니다. 간단하게 벡터 애니메이션을 웹, 앱에 적용할 수 있게 만들어주는데요. 이번 아티클에서는 Lottie(이하 로티)의 특징과 장, 단점들을 경험에 비추어 작성해보겠습니다. 공식 홈페이지 - https://airbnb.design/lottie/ Lottie Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as .. 2019. 11. 2. 톤 앤 매너란 무엇인가 한때 유행어처럼 쓰였던 '톤 앤 매너'의 정확한 의미는 무엇일까요? 간단하게 말하면 컨셉이라고 할 수 있겠고, UI/UX 디자인의 관점에서 보다 장기적인 관점에서 표현한다면 '일관된 방향'이라고 할 수 있을 거 같습니다. 디자인적인 시각에서 본다면 톤 앤 매너를 유지하는 요소로는 레이아웃, 색상, 폰트, 컨텐츠 등등이 있을 텐데요. 물론 저것들도 중요한 요소들이지만 저는 오늘 'Glossary'와 관련지어서 톤 앤 매너에 관해 써보겠습니다. 그럼 먼저 Glossary가 의미하는건 '용어사전'입니다. 디자인에서 웬 용어사전이냐고 하겠지만 분명히 텍스트도 시각적인 요소이며, 규모가 큰 디자인 시스템의 경우 따로 용어사전을 정의하는 편입니다. IBM의 카본 디자인 시스템의 Glossary - https://w.. 2019. 11. 1. Hierarchy란 무엇인가 먼저 Hierarchy의 사전적 의미는 '계층'을 뜻하며 UI/UX에서는 보통 계층 구조라고 이해를 합니다. Hierarchy(이하 계층 구조)는 UI에서 굉장히 중요한데, 보통 Typography와 많이 연관됩니다. 예를 들어, 각 페이지나 컴포넌트를 대표하는 텍스트는 대표스럽게 보이면 되고, 덜 중요해 보이는 텍스트는 덜 중요해 보이면 되는 겁니다. 쉽게 말해서 각 요소들의 서열을 정리해주는걸 계층 구조를 정리한다고 생각하면 쉽습니다. 계층 구조를 정리하는 방법은 여러 가지가 있지만 개인적으로는 Typography가 가장 쉽게 이해가 되는 방법이므로, Typography를 예로 들어 설명하겠습니다. Typography에서 계층 구조를 정리하는 요소로는 폰트의 크기(size), 굵기(weight), 색.. 2019. 10. 31. (번역)애자일이나 워터폴은 잠시 잊어라, Silo Busting 타임이다! 원문 : https://medium.com/@michelleparsons225/forget-about-agile-vs-waterfall-its-about-silo-busting-4e44d42e65d3 Forget About Agile vs. Waterfall, It’s About Silo Busting Agile is not the answer to all of your company’s problems. Silo busting is. Trust me, I know. I’ve been a ScrumMaster and Agile Coach for… medium.com 애자일로 회사의 모든 문제를 해결책은 아니다. 바로 Silo busting(이하 사내정치 깨부수기)이 정답이다. 필자는 8년동안 스크럼 마스.. 2019. 9. 6. (번역)디자인 시스템은 무엇인가? -1부- 원문 링크:https://medium.com/@rangleio/what-is-a-design-system-7a3d63edfcf7 What is a Design System? By: Varun Vachhar and Catherine Maritan medium.com 다지인 시스템의 정의와 의미를 해석하는 건 조직마다 차이가 있을 수 있습니다. 이 포스트에서는 디자인 시스템의 과거인 스타일 가이드와 컴포넌트 라이브러리를 이야기하고, 개발과 디자인과의 격차를 줄이는데 도움이 될 것입니다. By: Varun Vachhar and Catherine Maritan 손을 떠난 문제 경험상 대부분의 조직은 웹사이트를 페이지의 집합으로 취급합니다. 페이지는 디자인에 대해 전체적인 관점을 제공합니다. 특정 컨텐츠를 어떻게.. 2019. 6. 18. (번역)쉽고 간단한 사용성 테스트 두가지 원문 링크 : https://uxdesign.cc/two-types-of-cost-effective-and-easy-usability-tests-cef41e4c13f Two types of cost-effective and easy usability tests Let us discuss cost-effective options for a usability test. In a world of a fast-paced environment, people have a skeptical attitude to UX… uxdesign.cc 요즘같이 빠르게 변화하는 환경에서는 비싸고 시간이 오래 걸리는 사용성 테스트에 회의감을 가지는 사람들이 많습니다. 일단은 제품을 테스트할 때 어떤 타입으로 정의할지 알아봅시다. 저.. 2019. 6. 14. (번역)당신은 UX를 할 수 있나요? 미디엄을 보다가 굉장히 맘에 들어 충동적으로 번역합니다. 원문은 아래에 링크입니다. https://uxdesign.cc/hey-can-you-do-the-ux-for-us-432a38eac295 Hey, can you ‘do the UX’ for us? A tale of UX as a misconception. uxdesign.cc — 안녕하세요. 저는 John입니다. 오늘부터 이 프로젝트에 UX 디자이너로 참여하게 되었습니다. — 저는 프로젝트 매니저인 Joe라고 합니다. 같이 일하게 되어 반갑습니다. — 저도 반갑습니다. 뭐부터 하면 될까요? — 음.. 저희가 첫 번째 버전을 디자인했는데요, 몇 가지 UX 하는 걸 개선할까 생각 중입니다. 사람들이 앱을 받고 한 번만 사용하고 다시는 사용하지 않더군요.. 2019. 6. 12. 이전 1 다음
