전체보기 24

프로덕트 디자이너 10일차 | 디자인 기초를 활용한 종합 결과물 제출

1. 퍼스널 브랜딩 기획서로 파이어플라이, 익스프레스, 포토샵, 일러스트 중 원하는 툴을 사용하여 나만의 브랜딩 2. 심리학 법칙 분석 및 사례 조사수업에서 배운 심리학 법칙 중 하나를 선택하여, 해당 법칙이 실제 디자인에 어떻게 적용되고 있는지 구체적인 사례를 조사하고 분석해 주세요.선택한 심리학 법칙: 피크-엔드 법칙(Peak-End Rule)구체적인 사례: 스타벅스법칙 적용 설명:1. 스타벅스에서의 피크(peak) 경험개인화된 주문 경험→ “내가 존중받고 있다”는 감정이 생김.→ 바리스타가 고객 이름을 불러주며 음료를 건네는 순간은 고객 입장에서 특별한 하이라이트.매장 분위기와 감각 자극→ 반복적으로 “아, 스타벅스에 왔구나”라는 몰입감 제공.→ 향(커피향), 배경음악, 매장 인테리어 조명 등이 ..

카테고리 없음 2025.09.17

프로덕트 디자이너 2일차 | AI 시대의 디자인 활용 1 - 프롬프트 과제

나는 맛집가는걸좋아해 동네에 맛집 하나씩 가보는걸 좋아하는데 이거랑 관련해서 앱 이름을 지어줘발자국: 내가 다녀온 맛집 발자국을 하나씩 남긴다는 의미로, 기록의 재미를 강조합니다.1.'발자국'앱 핵심 기능 목표맛집 기록의 즐거움: 사용자가 방문한 맛집의 경험(사진, 솔직한 후기, 평점 등)을 쉽게 기록하고, 한눈에 볼 수 있도록 시각화하여 '나만의 맛집 지도'를 만드는 재미를 제공합니다.동네 탐험 동기 부여: 사용자가 현재 위치를 기반으로 주변의 숨겨진 맛집이나 새로운 맛집을 발견할 수 있도록 돕고, 동네 맛집을 하나씩 '정복'하는 듯한 성취감을 줄 수 있는 시스템을 도입합니다.2.타겟 사용자구분주요 타겟서브 타겟나이대20대 중반 ~ 30대 후반 (밀레니얼 및 Z세대)40대 초반 (맛집 탐방을 즐기는 직..

카테고리 없음 2025.09.15

프로덕트 디자이너 2일차 | 색상, 타이포그래피, 색상환, 컬러팔레트

색상의 기본개념과 원리색의 3요소 (색상Hue, 명도Value, 채도Saturation)색상올해의 컬러 트랜드 같은건 팬톤컬러에서 영향을 받음올해는 모카무스~*pantone사이트 참고 (매년 컬러 트랜드 알 수 있음)명도색의 밝기/ 같은색이어도 밝으면 눈에 띄고, 어두우면 차분한느낌명도활용하면 글씨 가독성 좋게 할 수 있음, 어떤 버튼일 때 명도로 더 눈에띄게 할 수 있음명도에 따라 분위기가 달라진다채도얼마나 맑아?얼마나쨍해?느낌원색에 가까우면 채도가 높음채도가 높으면 색이 선명함낮은채도는 회색끼가 돈다.ex)유튜브 썸네일같은거, 강조하고자 할때 타이포그래피 기초글자를 배치하고 디자인하는 기술과 예술폰트,글자 크기, 간격, 정렬, 색상 등을 조절하여 가독성과 시각적인 완성도를 높인다.같은 "안녕하세요"도..

카테고리 없음 2025.09.05

프로덕트 디자이너 1일차 | 디자인이란?

●데이터를 참고하면 더 나은 디자인을 결정할 수 있다.●아무리 예뻐도, 테스트를 했을 때 좋은 데이터를 보여주지 않으면 탈락.ex) A는 깔끔하고 정돈되어있음, B는 글씨도크고 한눈에 볼 수 있음테스킹했을 때 사용자들이 B를 더 이탈하지 않고 좋아하면 B를 채택●UX/UI디자이너는 사용자 행동을 이해하는게 중요한데 데이터 기반으로 이해하는 것이 중요하다.●또한 디자니어는 팀워크가 필수! 팀웤이 좋을수록 창조적이고 더 좋은 디자인을 만들어낼 수 있다.* 근거는 데이터로, 중요한건 팀웤! 디자인이란?디자인은 단순히 예쁜것, 꾸미는것, 장식이아니라 겪는 문제를 발견하고 해결하는 것단순하게 예쁜 결과물이 아니라 문제를 해결하는 과정이 디자인으로 나온 것 디자인 = 문제를 해결하는 과정분명한 목적,의도를 가지고 ..

카테고리 없음 2025.09.04

autolayout 채우기, 허그, 고정 속성

1.프레임을 만들고 텍스트 추가해서 쓰기2.하나 복사해서 이번엔 더 길게 쓰기3.아래에 버튼을 하나 만든다 (버튼에 자동 레이아웃과 채우기로 색 추가/ 테두리 곡률, 수평패딩, 수직패딩 설정)4.전체 프레임에 자동 레이아웃을 추가한다 (shifte+a)→ 이제 텍스트는 자동 레이아웃을 따라 움직인다. 방향 변경도 가능(세로 또는 가로 등)이제 텍스트를 선택하면 가로 크기 조정, 세로 크기 조정 등을 할 수 있음프레임 크기를 가로로 조정하면 프레임에 따라 동작하지 않고 콘텐츠의 너비가 고정된다. →텍스트를 반응형으로 만들어보자!속성을 고정에서 컨테이너 채우기(Fill container)로 변경하고 프레임 크기를 조정하면 텍스트가 반응한다(프레임 크기 조정하는 대로 움직임)→버튼을 반응형으로 만들어보자!버튼..

카테고리 없음 2025.09.02

자동 레이아웃 활용하기 (버튼생성, 텍스트 기준선 정렬, 아이콘)

● 자동 레이아웃을 활용하여 버튼 생성 방법자동 레이아웃 단축키 Shifte + AOption키 누른채 양쪽 패딩누르고 원하는 값 입력하면 양쪽 패딩값이 동일하게 된다. 여러 요소에 자동 레이아웃을 지정하면 순차적으로 정렬된다.강의에서 "pacing mode"라는 이름의 버튼을 찾으라는데 아무리 찾아도 없어서 알아보니,"pacing mode" 버튼은 사라지고 Gap 필드 자체가 모드 전환 기능을 가지게 되었다고 한다.기본적으로 숫자가 들어가 있음 → Packed 상태숫자 대신 Auto를 입력 → Space Between 상태 packed 모드는 메인 프레임에 따라 동작하지 않는다.Space Between 모드는 레이아웃 프레임에 따라 동작한다.50의 수직패딩을 적용했을 때Excluded일 경우 이 50..

카테고리 없음 2025.09.02

Effects 기능 살펴보기

레이어블러1. 프레임 생성2. 프레임 위에 동일한 직사각형을 만든다. (덮어준다)3. 직사각형 선택 후 마우스 우클릭 Plugins - Saved pligins - unsplash 클릭해서 이미지를 가져온다.4. Effects 에서 Layer blur로 변경해서 블러 효과를 준다.(이 레이어 블러는 이미지를 넣은 직사각형에 적용된다./ 직사각형이 아닌 프레임에 적용될 경우 나중에 텍스트가 흐리게 보임)5. 그 위에 텍스트 도구를 사용하여 문구를 입력한다.그럼 뒤에는 블러처리가 되고 텍스트는 선명한 이미지 완성! 근데 왜 프레임 안에 이미지를 직접 배치하지 않았을까?왜 직사각형을 가져와서 효과를 적용했을까?프레임에 블러를 적용할 경우 텍스트로 레이어도 흐려지기 때문 /주의할점1. 꼭 프레임 위에 직사각형 ..

카테고리 없음 2025.09.01

색상팔레트

홈 - templates and tools - 검색창에 color cpmpass 검색 후 Try in 클릭그럼 플러그인에 저장이 되어서 가져올 수 있음프레임을 하나 만들고 원하는 색상을 fill로 채워준다.헥스 코드를 복사해서 Active color칸에 붙여넣기 한 후 Update 클릭 그럼 기본 색상이 있고 그 아래에 강도가 있는 색상, 오른쪽은 색상 조화가 있다.틴트팔레트 내보내기 등 다양한 색상 조화를 내보낼 수 있다. 기본색상을 변경해서 만들 수 있다.기본 색상이 핑크이고 핑크색조들과 핑크 세트 등이 있다. 쉐이드와 틴트를 같이 배치할 수 있다. 모서리를 클릭한 채로 모양을 회전시켜 배치한다.혼합색상팔레트도 만들 수 있다 (핑크팔레트 맨 위에 사진)→ 이 옵션은 현재 기본색상과 이전 기본 색상을 ..

카테고리 없음 2025.09.01

피그마 프로토타이핑

우측 Prototyoe - Flow starting point 클릭 하면 Flow1번이 된다.Flow1번은 가정 첫번째로 시작되는 화면을 설정해 주는 것프로토모드로 들어가게 되면 오브젝트 또는 프레임을 선택하면 원이 생김그 원을 잡아끌면 원하는 위치로 옮길 수 있고 인터렉션이 연결됨토글 팝업창에 사용자의 행동과 인터랙션 종류를 정해주면 특정 애니메이션이 연출됨 중간에 화면 또는 인터랙션이 끊어지게 되면 Flow2번,3번,4번...계속 늘어나게 됨Flow1번 위치는 원하는 곳으로 옮겨질 수 있음인터랙션: 어떤 버튼을 사용자가 누르면 그로인해 나타나는 작은 효과 상호작용 현상on tap 무언가를 눌렀다가 떼는 행위on drag 마우스 커서는 잡고 끌거나 손가락을 잡고 끄는 행위(스와이프)while hover..

UXUI 부트캠프 2025.08.29