전체 글
-
Today I Learned [이번주 목표] 디자인 파운데이션, 컴포넌트, UI 설계 오늘 할 일 필수 과제 마무리 1. 문제점 컨포넌트 만들 때 어느 사이즈로 만들어야 하는지 감이 없음. 어떤 사이즈 규격을 기준을 해야 하는지 모르겠음 컨포넌트 페이지 제작부터 무엇들을 어떤 기준으로 분류해야 하는지 모르겠음 파운드 컨포넌트 제작하는데 오토레이아웃 속성이 제대로 걸려 있지 않은 것을 알아차림 스티키 스크롤 컨포넌트가 native 프레임에 가려 보이지 않음 2. 시행착오 컨포넌트를 먼저 만드는 게 아니라, 프레임에 무작정 디자인 시작하고 그걸 컨포넌트식으로 바꿈. 시간을 많이 잡아 먹음 오토레이아웃 fill hug fixed 속성 하나하나 비교해가면서 재설정 3. 해결방법 해결했다면 어떻게 해결? 강의 다..
[UIUX] 스파르타 2024-01-08 TILToday I Learned [이번주 목표] 디자인 파운데이션, 컴포넌트, UI 설계 오늘 할 일 필수 과제 마무리 1. 문제점 컨포넌트 만들 때 어느 사이즈로 만들어야 하는지 감이 없음. 어떤 사이즈 규격을 기준을 해야 하는지 모르겠음 컨포넌트 페이지 제작부터 무엇들을 어떤 기준으로 분류해야 하는지 모르겠음 파운드 컨포넌트 제작하는데 오토레이아웃 속성이 제대로 걸려 있지 않은 것을 알아차림 스티키 스크롤 컨포넌트가 native 프레임에 가려 보이지 않음 2. 시행착오 컨포넌트를 먼저 만드는 게 아니라, 프레임에 무작정 디자인 시작하고 그걸 컨포넌트식으로 바꿈. 시간을 많이 잡아 먹음 오토레이아웃 fill hug fixed 속성 하나하나 비교해가면서 재설정 3. 해결방법 해결했다면 어떻게 해결? 강의 다..
2024.01.08 -
overview 피그마 활용법 1,2 완강 + 개인 과제 시작하기 KPT 회고 Overveiw에 작성한 일을 Keep, Problem, Try 세가지 관점으로 회고하기 KEEP 1) 여태 주먹구구식으로 했던 피그마 사용을 강의를 통해 정도를 익혀가고 있음 2) 컴포넌트 베리언츠 만드는 방법을 익힘 PROBLEM 1) 네이밍 정리 - 이젠 할 때도 됐는데 좀만 바쁘면 네이밍 가볍게 쓰루해버림 2) 컴포넌트 만드는 기준 - 다이얼로그같은 모달 컨포넌트 만들어야 하는데, 모달 속 컨포넌트 요소들도 만들어야 함. 둘 다.. 만드는게 맞아? 3) 폰트 하이라키 - 유튜브 보니까 어지간한 디자인은 폰트 가지수 10개 이하로 끝낼 수 있다 했는데 개인 과제 3페이지만에 11종류를 써버림.. 4) 색상 규칙 - 색상 ..
[UIUX] 스파르타 2024-01-05 WILoverview 피그마 활용법 1,2 완강 + 개인 과제 시작하기 KPT 회고 Overveiw에 작성한 일을 Keep, Problem, Try 세가지 관점으로 회고하기 KEEP 1) 여태 주먹구구식으로 했던 피그마 사용을 강의를 통해 정도를 익혀가고 있음 2) 컴포넌트 베리언츠 만드는 방법을 익힘 PROBLEM 1) 네이밍 정리 - 이젠 할 때도 됐는데 좀만 바쁘면 네이밍 가볍게 쓰루해버림 2) 컴포넌트 만드는 기준 - 다이얼로그같은 모달 컨포넌트 만들어야 하는데, 모달 속 컨포넌트 요소들도 만들어야 함. 둘 다.. 만드는게 맞아? 3) 폰트 하이라키 - 유튜브 보니까 어지간한 디자인은 폰트 가지수 10개 이하로 끝낼 수 있다 했는데 개인 과제 3페이지만에 11종류를 써버림.. 4) 색상 규칙 - 색상 ..
2024.01.05 -
Today I Learned [이번주 목표] 피그마 강의 완강 + 개인과제 오늘 할 일 개인과제 아이콘, 컴포넌트 베리언츠 활용하기 1. 문제점 - 아이콘 직접 만들기 : 여태 구글 머터리얼 플러그인 사용해서 아이콘을 사용했는데, 예전 조원이었던 분께 펜툴 활용법을 배워 하나씩 시도해 보고 있다. 아직까진 남의 아이콘을 대고 똑같이 따라 그리는 것인데도 규격 맞추는게 너무 어렵다. 소수점으로 떨어지면 안 된다는데 flatten이나 유닛으로 묶으면 홀수나 소수점으로 떨어지는 경우가 많아 시간을 많이 잡아 먹음 - 아직까지 베리언츠 활용법이 손에 익지 않았다. - 각 컨포넌트마다 간격을 얼마나 줘야 하는지, 폰트 강약을 어떻게 줘야 하는지 감이 없다. - 버튼 컴포넌트에서 마진까지 같이 잡아서 베리언츠를 만..
[UIUX] 스파르타 2024-01-04 TILToday I Learned [이번주 목표] 피그마 강의 완강 + 개인과제 오늘 할 일 개인과제 아이콘, 컴포넌트 베리언츠 활용하기 1. 문제점 - 아이콘 직접 만들기 : 여태 구글 머터리얼 플러그인 사용해서 아이콘을 사용했는데, 예전 조원이었던 분께 펜툴 활용법을 배워 하나씩 시도해 보고 있다. 아직까진 남의 아이콘을 대고 똑같이 따라 그리는 것인데도 규격 맞추는게 너무 어렵다. 소수점으로 떨어지면 안 된다는데 flatten이나 유닛으로 묶으면 홀수나 소수점으로 떨어지는 경우가 많아 시간을 많이 잡아 먹음 - 아직까지 베리언츠 활용법이 손에 익지 않았다. - 각 컨포넌트마다 간격을 얼마나 줘야 하는지, 폰트 강약을 어떻게 줘야 하는지 감이 없다. - 버튼 컴포넌트에서 마진까지 같이 잡아서 베리언츠를 만..
2024.01.04 -
Today I Learned [이번주 목표] 피그마 활용 강의 완강, 개인과제 제출 오늘 할 일 피그마 강의 완강 1. 오늘 배운점 UI 폰트 / 컬러 규격 1. 폰트 종류 - Display : 화면에서 가장 큰 텍스트. 짧고 중요한 텍스트/숫자에 적용. 손글씨같은 스타일의 표현력 있는 글꼴 선택을 고려. - Headline : 디스플레이보다 작은 화면에서 짧고 강조되는 텍스트에 적합. 콘텐츠 중요 영역 표시하는데 유용함. 행간 활용으로 가독성 유지 - Title : 헤드라인보다 작으며, 짧은 내용의 중간 정도 강조 내용을 적음. 상단 탭바 혹은 카테고리 헤더에 사용 가능 - Body : 긴글에서 사용. 가독성을 위한 작은 폰트 사용하며 장식적인 폰트 지양. - Label : 컴포넌트 내부 폰트, 본문에..
[UIUX] 스파르타 2024-01-03 TILToday I Learned [이번주 목표] 피그마 활용 강의 완강, 개인과제 제출 오늘 할 일 피그마 강의 완강 1. 오늘 배운점 UI 폰트 / 컬러 규격 1. 폰트 종류 - Display : 화면에서 가장 큰 텍스트. 짧고 중요한 텍스트/숫자에 적용. 손글씨같은 스타일의 표현력 있는 글꼴 선택을 고려. - Headline : 디스플레이보다 작은 화면에서 짧고 강조되는 텍스트에 적합. 콘텐츠 중요 영역 표시하는데 유용함. 행간 활용으로 가독성 유지 - Title : 헤드라인보다 작으며, 짧은 내용의 중간 정도 강조 내용을 적음. 상단 탭바 혹은 카테고리 헤더에 사용 가능 - Body : 긴글에서 사용. 가독성을 위한 작은 폰트 사용하며 장식적인 폰트 지양. - Label : 컴포넌트 내부 폰트, 본문에..
2024.01.03 -
Today I Learned [이번주 목표] 오늘 할 일 11번가 ui 솔루션 발전 시키기 + 피그마 구현 해보기 + 피그마 활용법 1주차 듣기 1. 오늘 배운점 피그마 기초 활용법 프레임과 그룹, 레이어 정렬이 중요한 이유 2. 아쉬운점 그 동안 프레임 그룹을 내 마음대로 왔다 갔다 하면서 써서 몸에 익어버렸다. 미리 알고 처음부터 몸에 베어 있으면 좋았을텐데.. 이제부터라도 새롭게 습관을 들여야지 3. 앞으로 다짐 디자인은 개발과 함께 가져가야한다는 것을 염두해 두고 작업하기 프레임과 그룹의 차이를 확실히 하기 레이아웃 정리 하면서 작업하기
[UIUX] 스파르타 2024-01-02 TILToday I Learned [이번주 목표] 오늘 할 일 11번가 ui 솔루션 발전 시키기 + 피그마 구현 해보기 + 피그마 활용법 1주차 듣기 1. 오늘 배운점 피그마 기초 활용법 프레임과 그룹, 레이어 정렬이 중요한 이유 2. 아쉬운점 그 동안 프레임 그룹을 내 마음대로 왔다 갔다 하면서 써서 몸에 익어버렸다. 미리 알고 처음부터 몸에 베어 있으면 좋았을텐데.. 이제부터라도 새롭게 습관을 들여야지 3. 앞으로 다짐 디자인은 개발과 함께 가져가야한다는 것을 염두해 두고 작업하기 프레임과 그룹의 차이를 확실히 하기 레이아웃 정리 하면서 작업하기
2024.01.02 -
1. 공감하기 1) 제품의 주요 사용자는 누구인가? 주요 사용자 : 직장인(약 44%), 그 중 56%는 학부모, 식료품 구매에 가장 큰 관심을 보임 더보기 출처 : igaworks 사용하는데 높은 영향을 미친 이유 : 이벤트, 프로모션, 혜택 사용하는데 낮은 영향을 미친 이유 : 배송 관련, 앱사용성 관련 더보기 출처 : opensurvey 2) 유저 여정 생각해보기 목표 : 원하는 물건 찾아서 구매하기 action 식료품을 사야함 식료품 파는 곳 고르기 할일 - 필요한 식료품 정하기 - 예산 정하기 - 오프라인 매장 둘러보기 * 배송여부 확인 * 거리 확인 * 재고 확인 - 온라인 둘러보기 * 플랫폼별 혜택 비교하기 * 배송 소요 시간 확인 * 리뷰 확인 감정 형용사 - 귀찮음 - 번거로움 - 귀찮음..
[UIUX] 스파르타 Ch.2 개인과제 - 11번가 UI 21. 공감하기 1) 제품의 주요 사용자는 누구인가? 주요 사용자 : 직장인(약 44%), 그 중 56%는 학부모, 식료품 구매에 가장 큰 관심을 보임 더보기 출처 : igaworks 사용하는데 높은 영향을 미친 이유 : 이벤트, 프로모션, 혜택 사용하는데 낮은 영향을 미친 이유 : 배송 관련, 앱사용성 관련 더보기 출처 : opensurvey 2) 유저 여정 생각해보기 목표 : 원하는 물건 찾아서 구매하기 action 식료품을 사야함 식료품 파는 곳 고르기 할일 - 필요한 식료품 정하기 - 예산 정하기 - 오프라인 매장 둘러보기 * 배송여부 확인 * 거리 확인 * 재고 확인 - 온라인 둘러보기 * 플랫폼별 혜택 비교하기 * 배송 소요 시간 확인 * 리뷰 확인 감정 형용사 - 귀찮음 - 번거로움 - 귀찮음..
2024.01.02