본문 바로가기

분류 전체보기36

상업적 사용 가능한 무료 아이콘 과 사용시 주의 사항 / 라이센스 확인 방법 (Feather icon - MIT 라이센스, Google Material icon - Apache 라이센스) 디자인 작업을 하다보면 아이콘을 사용할 일이 정말 많습니다. 그럴 때 규모가 큰 회사라면 아이콘을 전문으로 만드는 팀이 따로 있어서 괜찮지만 규모가 작거나 별도의 아이콘 제작 팀이 없다면 결국 UI 디자이너가 아이콘까지 제작해서 사용해야합니다. 그런데 아이콘 디자인은 라운딩, 간격, 두께 등 미세한 부분에 의해서 퀄리티가 달라지기 때문에 고도의 집중력과 세밀한 작업이 필요한 작업입니다. 그렇기 때문에 디자인 작업시에 들어가는 모든 시스템 아이콘을 디자인하는 것은 결코 쉽지 않습니다. 거기에 프로젝트 일정이 촉박하다면 더더욱 세밀한 아이콘까지 만들기는 시간이 걸립니다. 이럴 때 저는 주로 오픈소스 아이콘을 사용합니다. 디자인 퀄리티는 살려주고 작업시간은 단축시킬 수 있기 때문입니다. 이렇게 편리한 오픈소스.. 2023. 11. 23.
피그마 (Figam) 기초 : 피그마 그룹핑 방법 (Group, Frame, Section, Autolayout) 피그마에서 UI 화면을 디자인할 때 가장 많이 쓰이는 기능 중에 하나가 바로 그룹핑인데요. 이 그룹핑 방법들의 차이를 정확히 인지하고 있어야, 디자인 목적에 맞는 적절한 그룹핑을 선택해서 작업할 수 있습니다. 그래서 오늘은 각각의 그룹핑 방법의 특성과 차이점 그리고 각 그룹핑은 언제 사용하면 좋은지에 대해서 포스팅해보려고 합니다. 피그마에서 요소를 그룹핑하는 방법은 아래와 같이 4가지가 있습니다. 피그마 그룹핑 방법 4가지 & 정의 1. Group : 공간(페이지, 영역 등)이 아닌 단순히 요소들의 묶음 2. Frame : 화면(페이지) 단위 또는 헤더, 푸터와 같은 큰 틀을 의미 3. Autolayout : 요소들의 집합으로, 레이아웃(간격 등의)을 적용할 수 있는 작은 공간 단위를 의미 4. Sect.. 2023. 11. 20.
UIUX 일정관리 : 현업에서 일정관리하는 방법 WBS란? 필요 이유 및 작성방법 프로젝트를 시작하면 가장 먼저 작성하는 문서가 바로 WBS일 것입니다. WBS를 사용하면 기획, 디자인, 개발의 진척사항을 효율적으로 관리할 수 있어 실제 현업에서 많이 사용하는 툴입니다. WBS의 정의 및 필요한 이유 Work Breakdown Structure의 약자로 말 그대로 업무 분류 체계입니다. WBS에는 주로 프로젝트의 범위, 일정이 포함됩니다. 여기에 프로젝트 참여자들의 역량을 고려해 범위와 일정을 조율합니다. 보통 일정을 조율하기보다는 1,2차로 나누어 개발 범위를 조정해 관리하는 것이 일반적입니다. 1. 효율적인 일정 관리 WBS를 사용하면 프로젝트 전체의 워크 플로우를 한눈에 확인할 수 있으며 개인별로 본인의 업무 진척률을 관리해 일정을 효율적으로 관리할 수 있습니다. 2. 명확한 서.. 2023. 9. 19.
웹디자인 기초 : 기본 그리드 설정방법과 개념 및 제작시 고려사항 이전 포스팅에서 반응형과 적응형 디자인의 차이점과 제작시 고려사항에 대해 알아보았습니다. 오늘은 반응형, 적응형 디자인을 위한 그리드 시스템의 설정방법과 그리드 시스템 설정시 고려사항에 대해 알아보려합니다. 1) 그리드 시스템의 설정방법 웹사이트의 뼈대 그리드 시스템을 만들 때는 크게 4가지를 고려해 제작합니다. 최대폭(max-width), 컨테이너(container), 단의 수(columns), 여백(gutter)입니다. 용어 설명 - 최대폭: 보통 퍼블리싱 구현시에 주로 설정하는 값으로 최대로 구현할 수 있는 넓이를 뜻함 - 컨테이너: 디자인 & 퍼블리싱 모두 설정하는 가이드로 실제 컨텐츠가 들어가는 공간(박스) - 컬럼: 그리드 단의 수로 컨텐츠 배치를 위한 그리드 하나 하나를 의미함 - 여백: 단.. 2023. 5. 21.
피그마 꿀팁: 'Mockup Library' 플러그인 사용해 피그마로 목업하기 예전에는 정말 포토샵을 많이 썻는데, 프로그램이 무겁기도 하고 키려면 시간이 좀 걸려서 번거롭기도 해서 그런지 점점 디자인 외의 프레젠테이션 파일 작업도 피그마에서 하게 되는 것 같습니다. 하지만 포트폴리오 목업의 경우, 어쩔수 없이 포토샵을 사용했는데, 대부분의 디자인 파일이 피그마에 있다보니 목업을 위해서는 화면을 일일이 Export 해야하는 번거로움이 있었습니다. 오늘은 이러한 번거로움을 줄여줄 수 있는 피그마 Mockup Library플러그인을 소개하려고 합니다. Mockup Library플러그인을 사용하면 포토샵을 거치지 않고 다양한 perspective의 3D 목업도 가능하기 때문에 특히나 포폴을 위한 목업에 효과적입니다. 'Mockup Library'플러그인 사용방법 1. 먼저 피그마 Com.. 2023. 5. 13.
적응형과 반응형 디자인의 차이점과 제작시 고려사항 다양한 디바이스 환경에 맞춰 사이트를 디자인하는 방식에는 반응형과 적응형 크게 2가지가 있습니다. 둘은 언뜻 비슷해 보이지만 깊게 파고들면 완전히 다른 방식의 구현법입니다. 오늘른 반응형과 적응형 웹사이트에 대해 알아보고 이들의 장점과 단점 그리고 언제 사용하면 좋은지에 대해 알아보겠습니다. 반응형 디자인이란? 반응형 웹 디자인은 하나의 웹사이트 디자인을 화면 크기에 반응하도록 개발하여 모든 화면 크기에 맞춰 보여주는 디자인입니다. 보통 화면의 가로 넓이에 따라 콘텐츠나 디자인 요소를 조정해 제공합니다. 반응형 디자인의 화면 크기는 크게 웹, 모바일, 타블렛으로 3가지 화면크기에 맞춰 디자인합니다. 반응형 사이트 구현 포인트 한 개의 웹사이트 퍼블리싱 파일을 사용해 모든 화면에 호환되도록 개발하는 것으로.. 2023. 5. 5.
피그마 (Figam) 꿀팁 : Absolute positioning 정복하기 요소끼리 위/아래로 겹쳐서 표현해야할 때 CSS에서 주로 Absolute Position을 많이 사용해서 구현합니다. 이러한 Absolute Position을 피그마에서도 구현할 수 있는데요~ 생각보다 디자인할 때 이곳 저곳에서 사용할 일이 많아 소개해드리려고합니다 :) Absolute positioning 1.배경 요소에 Auto Layout 입히기 먼저 피그마에서 요소들을 Auto Layout (Shift + A)을 입혀줍니다. 특히 배경이되는 요소, 즉 아래에 깔릴 요소에는 무조건 오토레이아웃이 되어 있어야합니다. 하기 예시이미지에서는 Bar Graph BG가 배경이 되는 요소이고 Bar가 위에 띄울 요소입니다. 2. 피그마 우측 패널 상단에서 Absolute position 버튼 클릭 우측 패널에.. 2023. 4. 2.
피그마 (Figam) 기초 : 오토레이아웃(Auto layou) 정복하기 피그마를 활용해서 처음 디자인을 진행하는 입문자들에게 가장 낯선 기능 중 하나가 오토레이아웃(Auto layout)이라고 생각한다. 나 역시 포토샵에서 홈페이지와 이벤트 프로모션 디자인을 하다가, 본격적으로 앱기반 UIUX를 디자인하면서 지금의 피그마로 디자인 툴을 변환할 때 가장 어색했던 기능이 오토레이아웃(Auto layout)이었던 것 같다. 이번 포스팅에서는 피그마 초심자분들이 오토레이아웃(Auto layout)의 개념을 쉽게 이해하고 사용할 수 있도록 오토레이아웃(Auto layout)의 역할과 구성요소 그리고 생성방법 및 요소 설정방법을 소개하고자 한다. 1. 오토레이아웃(Auto layout)의 역할 오토레이아웃은 하나의 컴포넌트를 구성하는 작은 요소라고 할 수 있는데 컴포넌트에는 작은 버튼.. 2022. 12. 24.
UIUX : 앱 서비스 설계 - 정보구조 설계 서비스 기획이 어느 정도 완료가 된 후, 본격적인 애플리케이션 기획 전에 가장 먼저 하는 것이 바로 정보구조 설계(IA)이다. 정보구조 설계는 앱의 뼈대로 서비스 전체의 흐름을 결정하는 정보 구조이다. 따라서 사용자가 원하는 정보를 빠르게 파악할 수 있도록 서비스에 맞는 정보구조를 설계하는 것이 가장 중요하다. 사용자에게 필요한 콘텐츠와 이용방식은 서비스별로 모두 다르다. 그렇기 때문에 정보구조를 설계할 때는 사용자의 입장에서 정보구조를 설계하는 것이 중요하다. 이번 포스팅에서는 정보구조를 설계하는 방법과 정보구조를 설계하기 위해 필요한 설계 방법들에 대해 알아보려 합니다. 정보구조 설계란 무엇인가 정보구조를 설계하기 위해서는 먼저 서비스가 가진 모든 기능과 정보를 나누고 배치할 위치를 정해야 한다. 그.. 2022. 12. 18.

티스토리툴바