썸네일 #TIL_16 🍀 피그마 컴포넌트 심화 내용 정리 시간이 너무 잘 간다. 벌써 목요일이라니~오늘은 피그마 심화 강의 3주차 내용이었던 "피그마 컴포넌트 심화 내용"에 대해 정리해볼 예정이다.깔끔하게 강의 내용만 작성하고 싶어서 오늘 디자인 카타는 TIL에서 스킵! 1. 컴포넌트 스택과 독 ▸스택 Stack⇢  상하 or 좌우로 2개의 버튼을 동시에 배치하기 위해 사용하는 피그마 스킬버튼 컴포넌트는 여러 상황에서 가장 많이 사용하는 UI 요소 중 하나예요.팝업 등의 요소에서도 볼 수 있고, 일반적인 화면에서도 버튼을 좌우나 상하로 배치한 경우를 볼 수 있어요.  ▸독 Dock⇢  버튼 컴포넌트를 화면의 하단에 고정된 독(Dock) 형태로 사용 실제로 가장 많이 사용되는 버튼 컴포넌트의 형태예요.여백 요소까지 고려해서 하단에 고정되는 버튼 컴포넌트 형태를..
썸네일 #TIL_12 🍀 피그마 강의 시청 / 팀 Notion 꾸미기 드디어 금요일! 마무리 잘 해봅시다!!! 🔥0. 새로운 팀오늘은 3주차 마지막 날, UXUI 디자인 숙련 챕터가 시작되는 날이었다. 챕터가 바뀌는 날이면 팀도 바뀌기 때문에 새로운 팀원들과 팀 노션부터 작성하고 하루를 시작하였다.1. 강의 시청오늘은 디자인 숙련 챕터인만큼, 피그마 심화 강의를 받아서 듣기 시작하였다.배운 것을 요약하자면 UI 디자인 개념의 세부적인 내용이었다. 신기하게도 어제 들었던 디자인베이스 강의의 내용과 비슷한 주제였고, 더 자세한 내용을 배울 수 있어서 복습도 되고 좋았다.❖ 다양한 환경에 대한 UI 차이 이해UI는 사용자의 환경에 따라 다양한 형태로 사용할 수 있어요.어떤 환경들이 있는지 살펴보고, 각 환경마다 UI들이 어떻게 달라지는지 같이 알아봐요.❖ 반응형과 적응형의 차..
썸네일 #TIL_10 🍀 레퍼런스 분석 - 우리동네GS / 디자인베이스 강의 시청 수요일!! 좀만 더 힘내0. 디자인 카타💭나의 의견A 한글 로고를 사용하면 직관적으로 알 수 있고, 한글만의 독창적인 디자인도 가능하다. 하지만 브랜드 아이덴티티를 표현하기에는 어려움이 있다고 생각한다.B 알파벳 로고는 글로벌 사용자를 타겟팅할 때 유리하고, 해외 진출 시 동일한 브랜드명이 사용 가능하기도 하다. 또, 알파벳 특성상 심플하고 미니멀한 디자인이 가능해진다. 하지만 같은 알파벳을 쓰는 경우가 있을 것이기에 개성이 부족할 수 있다.개인적으로 심볼 로고, 콤비네이션 로고(글자 + 심볼)가 가장 좋은 것 같다. 💭팀원들과의 토의 내용스타트업이나 새로운 브랜드라면 한글 로고가 직관적이고 효과적일 가능성이 큼브랜드 인지도가 높은 대기업은 알파벳 로고 또는 심볼 로고 활용이 유리함각각의 로고 스타일..
썸네일 #TIL_9 🍀 레퍼런스 분석 - 파파고 / 과제 정리 및 보완 TMI: 오늘 치킨 먹음0. 디자인 카타💭나의 의견A 방식은 여러 카드를 한 눈에 볼 수 있고, 원하는 카드를 쉽게 선택 가능하다. 직관적인 리스트 형태로 카드를 펼치면 잔액까지 확인할 수 있어서 정보 전달이 뛰어나다. 빠르게 카드를 선택해야하는 상황, 여러 카드를 자주 변경해서 사용하는 사용자에게 적합하다.B 방식은 카드가 개별적으로 표시되어 한 번에 여러 장을 보기엔 어렵다. 하지만 카드의 생김새, 카드 이름 등 보다 상세한 카드 정보를 확인할 수 있어 혼란을 주지 않는다는 장점이 있다. 카드 정보를 명확히 확인해야하는 상황, 사용하는 카드가 많지 않은 사용자에게 적합하다.실생활에서 카드를 많이 사용하지 않아서 B도 불편함을 느끼지는 못하였지만 A를 더 선호한다. 💭팀원들과의 토의 내용 A 방식이..
썸네일 #TIL_8 🍀 레퍼런스 분석 - 북모리 / 프로토타입 구현 과제 월요일... 화이팅하지 못하는 나에게 화이팅!!!!!0. 디자인 카타💭 나의 의견B. 업데이트 후를 선호한다.업데이트 전 UI는 A와 B의 투표율 차이가 강조되고, 2가지 색상을 사용하여 직관성이 높다. 하지만 투표 UI로는 사용자에게 보다 익숙하지 않은 형태라고 생각한다. 반대로 업데이트 후는 익숙한 투표 UI 형태를 띄고, 투표 비율이 각각의 바 형태로 변경되어 가독성이 좋아졌다고 할 수 있다. 하지만 2가지 색상을 사용했던 전과 달리 검정색 바로 통일 되어있기 때문에 개인적으로 아쉬운 부분이다. 사용자가 색상을 선택할 수 있는 기능이 있으면 더 좋은 UI가 될 것 같다고 생각한다. 💭 팀원들과의 의견 정리B. 업데이트 후를 선호한다.A는 투표율 차이를 강조하고 두 가지 색상을 사용해 직관성을 높..
썸네일 #TIL_7 🍀 UXUI 강의 시청 / 프로토타입 구현 과제 제 잃어버린 연휴를 찾습니다. 0. 디자인 카타오랜만의 디자인 카타인데 딱 꽂히는 토픽이 없어서 아쉬웠다.그래도 실생활에서 자주 사용하는 기능인 Date Picker에 대한 토픽을 골라 진행해 보았다.💭나의 의견 A 캘린더형장점: 직관적이고 익숙한 디자인, 화살표 버튼을 통해 원하는 날짜를 찾기가 쉽다.단점: 모바일 환경에서 화면을 많이 차지한다.📌 사용 예시: 호텔 예약, 항공권 예매, 일정 선택 UI 등B 휠형장점: 터치스크린에서 사용하기 편리하고 작은 화면에서도 공간을 많이 차지하지 않는다.단점: 특정 연도나 날짜를 선택하는 데 시간이 걸릴 수 있고, 한눈에 보기 어렵다.📌 사용 예시: 모바일 앱의 생년월일 선택, 알람 설정 등B보다는 A를 선호하는 편이고, 사실 가장 편한 것은 캘린더 + 텍..
썸네일 디자인에 유용한 피그마 플러그인 4가지 1. uiGradients uiGradients는 그라디언트 색상 조합을 빠르게 탐색하고 프로젝트에 적용할 수 있도록 도와주는 플러그인입니다. 다양한 색상 조합을 제공하며, 디자이너가 손쉽게 색상을 선택해 배경, 버튼, 섹션 디자인 등에 활용할 수 있습니다. 직관적인 인터페이스로 원하는 스타일을 빠르게 찾을 수 있어 시간 절약에 유용합니다.  ↘  https://www.figma.com/community/plugin/744909029427810418/uigradients2. Vector Logos Vector Logos는 인기 있는 브랜드와 회사의 벡터 로고를 바로 검색하고 가져올 수 있는 플러그인입니다. 고품질의 로고가 SVG 포맷으로 제공되며, 디자이너가 프로젝트에 즉시 사용할 수 있도록 최적화되어 ..