나의 부수입 일지

1. 4개월 캠프 회고 (강점 / 단점 / 나만의 북극성)1) 캠프 회고4개월간의 부트캠프를 통해 단순히 UI를 만드는 디자이너가 아니라,문제를 정의하고 해결하는 과정 중심의 프로덕트 디자이너로 사고하는 방식을 학습했다.특히 프로젝트를 진행하면서 단순히 화면을 만드는 것이 아니라“이 기능이 왜 필요한지”, “비즈니스적으로 어떤 영향을 주는지”를 먼저 고민하는 습관이 생겼다.또한 팀 프로젝트를 통해 협업 과정에서의 커뮤니케이션과 방향 설정의 중요성을 체감했고,실제 서비스처럼 문제를 구조화하고 해결하는 경험을 할 수 있었다.2) 나의 강점① 실무 중심 사고문제를 발견했을 때 이상적인 방향보다실제 서비스에 적용 가능한 현실적인 해결 방법을 우선적으로 고민하는 성향이 있다.예를 들어, 기능을 새롭게 추가하기보다..

프로덕트 디자이너 교육을 들으면서가장 벽을 느꼈던 파트는 역시 UX파트였다. 기존에 디자이너로 일했던 덕인지UI, 피그마 적응은 빨랐고 즐거웠지만,처음 배우고 낯선 UX는 단계를 나아갈 때마다한숨이 나오는 과정의 연속이였다. 하지만, 낯설었던거지 어렵다는건 아니었고벽을 느낀 과정은 역시 설문 모객과정이였다. 지인이여도 설문을 부탁하는데는한계가 있을것이고, 모르는 사람에게 설문을 부탁하는건요즘같이 험한 세상에서기프티콘이라도 하나 준비하지 않고서는어려운 일 아닌가. UX파트에서 배운 사용자 설문수집방법은참 다양하고도 흥미로웠다. 정량적과 정성적, 크게 두 가지로 나뉘었고 정량적은 많은 모객 데이터를 기반으로수치, 데이터로 사용자의 의견을 수집하는 방법 정성적은 정량적에 비해 모객이 적지만사용자 한명 한명 ..

피그마 소개 PC의 경우 대부분 72dpi라는 동일한 해상도로 제작,다양한 해상도를 사용하는 스마트폰 등장|스마트폰의 출현으로 기존의 디자인 작업의 해상도에 문제가 차질이 생기기 시작,어떤 해상도로 작업을 해야 할지 문제가 발생하며, 픽셀의 개념이 무너지기 시작 * 해상도디지털 디스플레이 장치에서 화면이 몇 개의 픽셀로 이루어져 있는가를 나타냄(높은 해상도일수록 선명한 화면과 뛰어난 색감을 구현함) * PPI : 화면의 질을 나타내는 단위* DPI : 프린터, 스캐너 등의 정밀도를 재는 단위 ex) 안드로이드 기반 주요 해상도 종류x1 >160dpi : mdpi x2 >320dpi : xhdpix3 > 480dpi : xxhdpix4 > 640dpi : xxxhdpi 픽셀의 경우 해상도에 따라 크기가 다..

지금까지 간단한 피그마 사용법을공부해 봤으니 이를 활용해서좋아하는 웹화면을 만들어보며연습을 해보면 실력향상에 도움이 된다. 하지만 무턱대고 모방하지 말고,약간의 분석을 통해모방연습으로 실력을 키워보자. 1. 웹 화면 분석 대상 선정자신이 좋아하는 웹사이트 선택구성 요소 분석화면의 레이아웃, 헤더, 네비게이션, 콘텐츠 영역, 푸터, 버튼, 이미지, 아이콘 등의 요소들 세밀하게 분석의도 파악각 디자인 요소가 사용된 이유(가독성, 시각적 강조, 사용자 흐름 등)을 메모 2. 디자인 시스템 작성 기본 요소 정리폰트, 색상, spacing, 버튼, 스타일 등 반복 사용될 요소에 대한 규칙을 문서화스타일 가이드 제작디자인 전반에 일관성을 유지할 수 있는 가이드 라인 작성 디자인 모방연습 시,단순모방이 아닌 분..

오늘은 UI 컴포넌트와프로토타이핑의 간단한 개념정리와피그마를 활용한 실습을 해보도록 하자 UI 컴포넌트 디자인 요소(버튼, 카드, 모달 등)를하나의 단위로 만들어 재사용하는 객체 일관성을 유지하고,효율적인 수정과 관리가 가능하며작업 속도를 향상시켜준다. --- 이 UI 컴포넌트를 복사해서인스턴스로 만들어 사용할 수 있다. 인스턴스는 원본 컴포넌트 수정 시인스턴스가 자동 업데이트 되며, 개별수정, 다른 인스턴스로 교체 등이 가능하다. 프로토타이핑 실제 동작하는 인터랙티브 모형사용자 흐름 및 인터렉션을시뮬레이션하는 도구 - 링크 연결 버튼 클릭 시 다른 프레임으로이동하는 인터렉션 설정 애니메이션 효과 전환 애니메이션을 통해자연스러운 사용자 경험 제공 - 이렇게 나온 프로토타입을 통해사용자의 흐름을 ..

오늘은 디자인 원리의 기초인레이아웃 / 타이포 / 색상 이론을간단하게 정리하고이를 피그마 프로그램으로 연습해 보도록 하자 - 레이아웃 구성 원리 그리드 시스템정렬 및 간격반응형 디자인레이아웃의 균형과 정렬 간격을 체계적으로 관리하기 위한 기본 틀좌우, 상하 정렬을 통해시각적 안정성 확보다양한 디바이스 환경에서디자인이 올바르게 표시되도록 구성컬럼, 행, 간격을 설정하여일관된 다자인 유지마진, 패딩을 사용하여콘텐츠 간의 여백을 설정 타이포그래피와 색상이론 *타이포 그래피* 기본 요소계층 구조가독성폰트 종류, 크기, 굵기,행간, 자간등을 이해제목, 본문, 캡션 등의 텍스트 요소 간차이를 두어 정보 계층을 명확하게 함텍스트 배치와 간격 조절로읽기 쉬운 디자인 만들기 -*색상 이론* 색상 조합 원리심리적 효..

디자인 프로그램 하면 떠오르는 건? 옛날엔 주로 '어도비'프로그램 세트를 떠올리곤 했다(포토샵, 일러스트 등등) 물론 아직도 혼용해서 사용은 하고 있고,인쇄시안 작업은 일러스트가 강세지만 요즘 트렌드는 '피그마' 프로그램이다 피그마 프로그램은 특히 UXUI디자인에특화되어 있는 디자인 프로그램이라서 디자인 직군 중 UXUI를 꿈꾸는 디자이너에겐필수 아닌 필수적인 프로그램이다. 오늘은 디자인 프로그램 피그마에 대해 알아보자 피그마란? "클라우드 기반의 디자인 툴"로서인터넷 연결만 있으면 "어디서든" 작업할 수 있다. PC에 전용 PC프로그램을 깔 수도 있지만,깔지 않고서도 이용 가능 하다는 점이 장점 인터넷 연결을 기반으로 이용하는 앱이다 보니각 팀의 담당자가 동시접속하여실시간 협업이 가능하다는 장점 때문..

디자인에서 레이아웃만큼중요한 요소가 있다. 바로 색상인데, 디자인 교육을 듣게 되면초반에 기본 색상이론은 꼭 듣게 되고,자격증으로는 컬러리스트 기사 자격증이 있다. 그러니 오늘은 색상이론에 대해간단히 정리해 보자. -RGB / CMYK디자이너라면 꼭 알고 넘어가야 하는 색상이론각 시안 용도별로 시안파일 초기설정에서설정해 두어야 하는 색상모델 어떤 모델로 선택했는지에 따라화면, 인쇄 색상이 천차만별인 만큼 주의해야 함RGBCMYK빛의 3원색 빨강, 초록, 파랑을 조합시안, 마젠타, 노랑, 검정을 조합디지털 디스플레이에서 사용하는 모델인쇄물에서 주로 사용하는 모델색상을 더 할수록 밝아지는 가산혼합을 씀색상을 더 할수록 어두워지는 감산혼합을 씀쨍하고 밝은 색상이 특징다소 어둡고 칙칙한 색상이 특징 이런 차이점..

디자인은 균형, 비례, 강조, 리듬총 4가지의 기본원리가 있다. 각 기본 원리는 개별적으로 적용할 수 있지만,대부분은 조화롭게 사용하여 디자인한다. 별 게 아닌 기본원리 같지만,이 원리를 이해하고 활용하면용도에 맞는 사용자 친화적인 디자인을 할수 있다. - 1. 균형기본요소 중 시각적으로 안정감을 주는 요소 배치 방식대칭적 균형비대칭적 균형방사형 균형중심선을 기준으로 완벽히 대칭되는 방식전통적이고 안정감 있는 느낌비대칭이나, 무게감에서 조화를 이루는 방식창의적이고 동적인 느낌 제공중심선을 기준으로 퍼져나가는 형태시선이 중심점으로 집중됨균형이 깨진 디자인은 시각적으로 불안정하고 산만함적절한 균형은 목적과 메시지를 더욱 명확하게 전달함 2. 비례요소간의 크기나 양의 관계를 의미중요 정보 강조 / 디자인의 ..

실무 디자이너가 되기 전에몇 가지 마음가짐을 다 잡고준비하지 않으면 초반에 많이 힘들고멘탈이 무너지는 경험을 하게 되는데,신입 때 이걸 극복하는 게 힘들었었다.1. 실패를 두려워하지 않기신입 때는 실수 없이 완벽한 작품을한 번에 만들어내기 위해 전전긍긍하고그 작품이 내 맘대로 잘 진행되지 않으면처음 겪는 실패감과 무력감에자신감과 자존감이 깎이고,이는 다시 후의 작업에서 보이게 된다.누구나 처음은 있다.처음부터 완벽하려 하지 말고발전하는 사람이 되는 것에만집중하도록 하자.2. 협업과 피드백을 두려워말기신입에서 경력직으로 진화할 때가장 힘들었던 구간이었다.디자이너중에 내 작품을 뭐라 하는데속상하지 않은 사람이 있을까거기에 마케터의 관점개발자의 관점 등등각 협업 팀별로 보는 관점마저 다르다.그래서 처음에는 타..