본문 바로가기

분류 전체보기

(69)
[TIL] 24.10.10(목) 피그마 3주차 강의 내용 정리(1~4강)파운데이션파운데이션: UI를 구성하는 가장 작은 알갱이이자 기초 재료(ex. color, radius, spacing, font, icon 등)사용하는 사람마다 분류와 이름이 조금씩 다를 수 있음색상(color)서체(font, typography)간격, 여백(spacing, gap)곡률(radius)그리드(grid)고도(elevation)아이콘(icon) 컬러 스타일디자인을 할 때 가장 먼저 정하게 되는 핵심 요소 UI 디자인에서의 컬러(컬러가 디지털 환경에서 구현되는 개념과 원리)RGB: 컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여줄 수 있음> RGB색상을 사용할 때 '255, 255, 255' 처럼 작성하는 이유가 됨> 이 각각의 숫자를 컴퓨터는..
[TIL] 24.10.08(화) 피그마 2주차 강의 내용 정리(5~7강)컨스트레인트컨스트레인트(Constraint): 제약(조건), 제한이라는 뜻으로, 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한함* 오토레이아웃 안에있는 '자식 개체'들이 움직일 때의 조건 값* 부모 컨테이너의 크기를 조정할 때, 자식 컨테이너가 어디를 기준으로 변하게 할지를 정하는 것* 프레임(Child Container)을 다른 프레임(Parent Container)으로 드래그하면 그 프레임 안으로 들어가게 됨* 자식 컨테이너가 부모 컨테이너에 대해서 어떻게 고정되어있냐에 따라서 파란색 핀으로 표시되게 됨* 자식 컨테이너가 부모 컨테이너에 대해 Left, Top으로 고정되어 있을 때, 부모 컨테이너의 우측 방향으로 사이즈를 늘려도 자식 컨테이너는 움직이지 ..
[TIL] 24.10.07(월) 피그마 2주차 강의 내용 정리(1~4강)프레임과 그룹의 차이프레임: 피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체* 프레임은 디자인을 코드로 바꿀 때 개발 가능한 코드 블록으로 만들어짐* 개발에서의 박스 모델 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 것* 프레임은 그 안에 다른 개체나 프레임을 넣을 수 있음 > 프레임=컨테이너 라고도 불림 그룹: 여러 개체를 하나로 묶어주는 기능* 그룹은 다양한 경우에 사용 가능* 여러 개체를 조정, 디자인 정리 등의 편의를 위해 여러 개체를 하나로 담는 기능* 프레임과 달리 그룹은 코드 블록으로 인식할 수 없음 * 그룹은 여러 요소를 한 번에 담아서 움직일 때 주로 사용하며, 실제 UI 작업에서는 그룹이 아닌 프레임을 사용함 프레임 vs..
[사전캠프] 웹/앱 클론 디자인 웹/앱 클론 디자인📖 웹 또는 앱서비스의 디자인을 클론(clone)해봅니다. 이를 통해 피그마 기초 실력 향상과, UI/UX에 대한 이해를 갖추고 좋은 서비스를 보는 눈을 길러봅시다. 선정 앱: 컬리(Kurly)Badges 영역: 홈, 라운지, 카테고리, 검색, 마이컬리           간단하게 하단 독바를 통한 페이지 이동 프로토타입만 적용해서 녹화한 화면  시간이 부족해서 이미지, 배너, 상품 상세 페이지, 프로토타입 적용 등 클론 디자인을 완벽하게 하지는 못해서 아쉬움이 남는다.이걸로 사전 캠프 과제는 끝이다.다음 주부터 시작되는 본 캠프에서는 시간 관리를 효율적으로 해서 과제를 미루거나 진도에 뒤처지는 일 없게 해야겠다는 생각이 든다.
[사전캠프] 컴포넌트 만들기 컴포넌트 만들기더보기 📖 Material Design Guide를 참고하여 강의에서 배운 컴포넌트를 심도있게 학습해봅시다. PPT 보다 쉬운 피그마 강의를 수강하며 컴포넌트가 무엇인지 이해해봅시다.아래 북마크를 통해 Material Design의 컴포넌트 탭으로 접속합니다.Components – Material Design 3아래 내용들을 순서대로 확인하고, 공부해봅시다.ActionsCommunicationContainmentNavigationSelectionText inputs[공부방법]피그마를 엽니다.컴포넌트 만들기라는 페이지 또는 프로젝트를 하나 생성합니다.먼저, 각 탭의 내용을 정독 후에 정리합니다.각 탭에 있는 예시를 피그마를 통해 직접 만들어봅니다.만든 예시는 3번에서 진행한 내용 정리와 함..
[사전캠프] 웹/앱 서비스 조사 및 나의 관심 분야 찾아보기 1. 현재 웹/앱에는 어떤 서비스들이 있는지 살펴봅시다.더보기내가 자주 사용하는 웹/앱카카오톡, 컬리, 쿠팡이츠, 배달의민족, 네이버 지도, 우리WON뱅킹 등 관심 있는 웹/앱무신사, 토스, 트리플 등 내가 가고 싶은 기업에서 운영하고 있는 서비스 종류네이버 > 네이버, 네이버페이, 라인, 네이버 지도, 네이버 쇼핑, 치지직 등2. 서비스 별 주요 목적, 기능을 조사하여 정리해봅시다.더보기서비스 소개네이버 지도 타겟10대~50대 기능주변탐색: 내 주변 맛집, 가볼만한 곳 정보내비게이션대중교통 길찾기, 실시간 도착정보, 승하차 안내거리뷰: 장소 검색 및 길찾기 시 거리뷰와 항공뷰로 미리 장소 확인 가능저장: 맛집, 여행 스팟 등 관심 장소 저장 및 공유인스턴트 서치: 실생활에서 유용한 정보를 검색 과정중에..
[사전캠프] 내가 생각하는 프로덕트 디자이너의 핵심 역량 1. 요구사항 (+ 우대사항)[리디 주식회사] 프로덕트 디자이너4년 이상의 Moblie/Web 서비스 디자인 경험이 있는 분Figma 혹은 Sketch와 같은 툴로 UI 디자인이 가능하신 분리디 서비스의 가치를 이해하고 함께 서비스의 방향을 고민할 수 있는 분문제의 본질과 프로젝트의 목적을 이해하고 사용자 중심으로 문제를 해결할 수 있는 분본인의 디자인을 논리적으로 표현하고 설득할 수 있는 분개발자, PM 등과 원활한 커뮤니케이션 능력을 갖추신 분디지털 콘텐츠를 꾸준히 즐기고, 콘텐츠 비즈니스에 대한 이해도와 관심이 많은 분리서치와 데이터를 기반으로 문제를 파악하고 서비스를 개선한 경험이 있으신 분먼저 의견을 제시하고 주도적으로 일하기를 즐기시는 분제품의 데이터 분석 및 지표 관리를 해본 경험이 있는 분..
[TIL] 24.10.04(금) 피그마 1주차 강의 내용 정리(5~9강)8포인트 그리드 규칙규칙: 폰트는 2, 여백은 4(ex. 폰트 사이즈 16, 여백 12의 Medium 버튼을 기준 > Large 버튼은 폰트 18, 여백 16 / Small 버튼은 폰트 14, 여백 8) * 왜 하필 8배수? > 8은 1, 2, 4, 8로 나누는 것이 가능함 > 짝수로 나눌 수 있기 때문에 디자인을 망가뜨리지 않고 축소/확대 가능함* 최근 디바이스 해상도가 선명해지고 좋아져서 실무에서는 4배수도 많이 사용하며 제한적으로는 2배수도 사용하는 경우도 있음* 다른 디자이너와의 협업과 업무의 효율성을 위해 규칙을 준수하는 것이 좋음 피그마 도형 곡률도형을 둥글게 만들고 싶을땐, 도형의 너비 또는 높이의 절반 이상을 곡률로 설정하면 된다. (높이 100인 사..