분류 전체보기36 피그마(Figma) 꿀팁 : 피그마에서 Themer 플러그인으로 라이브러리 변환하기 보통 스타일 가이드는 1개만 있을 것이라고 생각하지만, 작업을 하다 보면 프로젝트의 성격에 따라 스타일 가이드가 1개 이상이 되기도 한다. 특히 라이트 모드와 다크 모드를 모두 고려해 프로젝트를 진행한다면 스타일 가이드는 자연스럽게 라이트 모드와 다크 모드로 2개가 생성된다. 보통 라이트 모드 스타일 가이드를 활용해 먼저 디자인을 하고 다크 모드로 변환하는 작업을 진행하게 되는데 이때 컬러부터, 폰트 스타일 등을 일일이 변경해야 한다면 사실상 또 다른 하나의 프로젝트를 진행하는 것과 다를 바가 없을 것이다. 이를 위해서 피그마에는 라이브러리 스와이프 기능이 있지만, 이 기능은 한 번에 모든 프레임의 컬러를 다 변환해 버리기 때문에 한 프레임씩 감도를 맞추며 작업하기에는 적합하지 않다. 이럴 때를 위해서 .. 2022. 12. 11. UIUX : 앱 서비스 설계 - 플로우차트 작성법 신규 앱 서비스를 기획한다면 제일 먼저 하는 일은 요구사항 정의와 이를 해결하기 위한 기능 명세서를 작성하는 것일 것이다. 이 두가지 작업이 완료되면 본겨적인 서비스 개발을 위해서 사용 동선을 설계해야하는데 이러한 작업을 플로우차트(Flow Chart)라고 한다. 플로우차트란? 플로우차트란 서비스를 사용하기 위해 수행하는 일련의 단계와 결정을 한눈에 파악할 수 있도록 도와주기 위해 시각적으로 표현한 자료이다. 각 단계는 정해진 다이어그램 기호에 맞춰 표현하며 진행 순서는 왼쪽에서 오른쪽으로 위에서 아래로 화살표를 이용하여 표현한다. 플로우차트는 다이어그램을 활용해 복잡한 프로세스를 이해하기 쉽도록 문서화하기 위해 주로 사용된다. 플로우차트가 필요한 이유는 크게 3가지 정도로 나눌 수 있는데, 첫 번째는,.. 2022. 12. 4. UIUX : 다크모드 UI 디자인 원칙 및 적용 가이드 디자인을 하고 있는 분들이라면 한 번쯤 다크 모드에 대해서 고민을 해보셨을 것이라고 생각합니다. 다크 모드를 단순히 디자인의 영역으로 생각할 수도 있지만 저는 디자인적인 영역뿐만 아니라 사용자의 UX측면에서도 다크 모드의 제공이 중요하다고 생각합니다. 이번 포스팅에서는 크게 3가지 측면에서 다크모드에 대해서 알아보려고 합니다. 첫 번째는 다크모드는 무엇이며 도대체 이걸 왜 해야 하는지, 또 요즘 대부분의 메이저 앱에서 다크 모드를 병행해서 제공하고 있는 이유를 두 번째는 다크모드의 대표적인 가이드를 확인하며 구현 시 고려사항과 이를 내 디자인에 적용하기 위한 디자인 가이드 제작 방법에 대해서 세 번째는 위에서 확인한 가이드를 피그마에서 실제로 적용하는 방법에 대해서 알아보려고 합니다. 1. 다크모드는 무.. 2022. 11. 26. 피그마(Figma) 꿀팁 : 그리드 생성 방법 및 라이브러리 스타일로 지정하는 방법 디자인의 기본이자 가장 중요한 뼈대인 그리드, 이러한 그리드를 Figma로 쉽게 설정하고 라이브러리에 저장해서 언제든 꺼내서 사용할 수 있다는 것을 알고 계신가요? 특히나 그리드는 매번 변경하기보다는 특정 양식을 정해놓고 사용하는 경우가 많기 때문에 피그마를 통해서 그리드 레이아웃을 설정하고 라이브러리로 관리하면 정말 작업 시에 정말 편리합니다. 이번 포스팅에서는 피그마에서 그리드를 설정하고 변경하는 방법과 평소 실무에서 자주 사용하는 PC의 기본 그리드 스타일인 Container형과 Fullscreen형과 모바일의 기본 옵션 값을 공유하려고 합니다. 또 한 번 설정한 그리드의 옵션 값을 매번 다시 지정하지 않아도 되도록 개인 라이브러리로 지정해서 사용하는 방법도 함께 소대 해 드리려고 합니다. 아래에 .. 2022. 11. 20. UIUX : 터치 제스처의 중요성과 종류 모바일 앱은 마우스가 아닌 손가락으로 터치를 하여 앱을 조작하기 때문에 터치 제스처의 설정은 가장 기본이라고 할 수 있다. 터치 제스처에서 가장 중요한 것은 디바이스를 잡는 모양에 따라 달라지는 터치 영역을 확인하고 이에 맞춰 최적화된 터치영역을 설정하는 것이다. 모바일에서 무언가를 터치하려면 최소 44픽셀 정도의 영역을 가지고 있어야 하기 때문에 모바일 디자인은 단순히 시각적인 영역뿐만 아니라 터치 영역의 설정도 중요하다고 할 수 있다. 때문에 UIUX디자이너는 터치 제스처의 다양한 종류를 알고 설계 시 적절하게 적용해야 한다. 화면 설계 시 필수로 알아야 할 기본 터치 제스처의 종류는 크게 8가지이다. 1. 탭 : 화면을 한 손가락으로 짧고 가볍게 한번 터치하는 제스처로 주로 서비스나 아이템을 실행할.. 2022. 11. 12. 피그마(Figma) 꿀팁 : 도형에 그라데이션 넣는 방법 피그마로 디자인을 하다보면 일러스트나 포토샵과는 조금 달라서 당황할 때가 있는데 그 중에 하나가 바로 그라데이션을 넣는 방법이였다. 일러스트나 포토샵은 그라데이션 기능이 별도로 나와 있어서 직관적으로 찾을 수 있었는데, 이미 어도비 프로그램에 익숙해진 후라 조금 해맸던 기억이 있다. 알고나니 굉장히 쉽게 그라데이션을 설정할 수 있었다. 1. 먼저 프레임안에 도형을 하나 그려주고 Fill값을 채워준다. 2. Fill값으로 들어 있는 컬러(네모 사각형 모양)을 클릭해 상세 컬러 지정 옵션을 열고 상단 Solid라는 옵션을 클릭한다. 3. Solid를 선택해보면 다양한 옵션들이 있는데 그 중에서 가장기본 그라데이션인 Linear을 선택한다. (Linear - 일반적인 선형 그라데이션, Radial - 동그란 .. 2022. 11. 11. UIUX : 디자인에서 그리드 시스템의 중요성 디자인을 처음 시작할 때 가장 많이 하는 질문이 아래와 같은 그리드 시스템과 관련된 내용일 것이다 그리드 시스템은 왜 설정해야 하나요? 그리드 시스템은 어떻게 설정해야 하나요? PC/Mobile별 그리드 시스템이 다른가요? 이 질문들에 답을 내기 위해서는 먼저 그리드 시스템이란 무엇인지를 한 번 정의해 볼 필요가 있을 것이다. 그리드 시스템이란? 디자인의 가장 기본이 되는 뼈대로 이를 주축으로 텍스트, 이미지, 버튼 등의 요소들의 배치를 돕는 가이드 시스템. 그렇다면 이러한 요소들을 배치하기 위해서는 꼭 그리드 시스템을 설정해야 할까라는 의문이 들 수도 있다. 이러한 의문을 해소하기 위해서, 요소를 배치하는데 그리드 시스템이 얼마나 도움이 되고 중요한지 다시 한번 정의해볼 필요가 있을 것이다. 그리드 시.. 2022. 11. 7. UIUX : 모바일 앱의 종류 모바일 앱 서비스 런칭을 준비하기 위해서는 모바일 앱의 종류를 알아고 제공할 서비스에 맞춰 구현할 앱을 선정해야 합니다. 사용자의 입장에서는 모두 비슷해 보일 수도 있지만 모바일 앱은 크게 4가지로 구분됩니다. 1) 모바일 웹 모바일 브라우저에서 구동되는 웹 장점: 개발 기간이 짧고 업데이트나 수정 변경이 용이, 별도의 설치 과정 불필요 단점: GPS나 센서 기능과 같이 스마트폰의 특정 기능 사용불가, 모바일 사용성과 호환성이 떨어짐 2)네이티브 앱 앱스토어를 통해 내려받아 설치하는 앱 장점: 구동 속도가 빠름, 스마트폰에 최적화된 개발 가능 단덤: 개발기간이 길고, 비용이 높다, 운영체제별로 대응을 해야하고, 스토어 등록 과정을 거치기 때문에 유지보수가 번거로움 3)웹 앱 통상의 웹보다 모바일에 더 최.. 2022. 9. 11. 브랜드 네임 제작시 주의할 점 서비스의 시작은 무엇일까요? 어쩌면 네이밍 즉 이름을 짓는 것이 서비스의 첫 시작이 아닐까 합니다. 어떤 서비스던 이름을 통해서 가장 먼저 소비자에게 각인이 됩니다. 즉, 브랜드의 정체성을 대표하는 가장 중요한 요소 중 하나라고 할 수 있습니다. 그만큼 중요한 네이밍 제작 작업 전 체크리스트를 미리 확인하고 이에 맞춰 네이밍을 선정한다면, 단순히 개인의 취향에 의해서 네이밍이 결정되지는 않을 것입니다. 브랜드 아이덴티티에 영향을 미치는 만큼 명확한 가이드를 가지고 선정하는 것이 중요하기 때문에 저는 크게 비즈니스적인 측면과 디자인적 측면, 이렇게 2가지 체크리스트를 점검하며 네이밍을 진행하고 있습니다. 비즈니스적 체크리스트 브랜드 전체의 컨셉과 이미지를 포함하는가 동일한 네이밍으로 등록된 다른 앱은 없는.. 2022. 8. 8. 이전 1 2 3 4 다음
