학습일지

[제로베이스 UIUX스쿨] 1주차 학습일지

hippuzzang 2024. 12. 5. 15:52

학습 주제

  • UI 실습 디자인 25종 똑같이 만들기
  • 생활 속 UX디자인의 사례 찾기
  • 나의 UX디자인에 대한 정의 
  • 디자인기초 및 figma 기초강의

1. UI 실습 디자인 25종 만들기

25가지나 되는 UI 컴포넌트들 강의를 보며 따라 만들었다.

피그마툴은 회사다니면서 건너 들어봤었고 사용은 이번이 처음이였다! 

다행히 무료였고 강의를 보며 따라해 보았다. 

강의는 30분 남짓이였지만 익숙하지 않은 나에게 따라하는거는 좀 시간이 걸렸다.

따라하면서 여백과 레이아웃을 익히게 되었다. 동시에 UI용어도 알게되었다.

  1. 폰트 : headline (제일 큰 텍스트 ) / body (줄글) / caption (간단한한줄, 주석)
  2. 컬러 : 버튼, 타이틀, 본문,  비강조텍스트, 라인, 배경 컬러를 정의함
  3. 그리드 :  디자인영역을 일정하게 나누는 것  / 여백과 거터도 이때배웠다. 
  4. 아이콘 : 정보의 시각화를 통해직관적인 컨텐츠인지를 돕는다 / 1배수로 24x24 박스안에서 제작된다.   
  5. 버튼 : 주버튼, 기능버튼으로 역할이 나뉘어지고 상태는 기본 눌렀을때, 비활성으로 나뉜다.
  6. 셀렉션 컨트롤 : 체크박스, 라디오버튼, 스위치 컨트롤
  7. 벳지 : 새로운 업데이트와 알림에 대한 정보를 제공할 떄 사용되는 컴포넌트 
  8. 다이알로그 : 사용자의 지시사항이나 결정을 재차 묻기위해 대화형태로 띄어지는 창
  9. 텝 : 여러 섹션을 신속하게 전환할 수 있게 함
  10. 이미지박스 : 배너나 프로모션등에이미지영역과텍스트 영역을 크게 구분하여 사용   
  11. 모듈 
  12. 썸네일 모듈
  13. 베이직모듈
  14. 모듈베리에이션
  15. 페이지1
  16. 페이지2
  17. GNB : Global Navigation Bar의 약자로 메뉴바를 뜻함
  18. 바텀바 : 모바일 화면 하단에 탐색 및 주요작업을 표시하는 바
  19. 팹과 푸터 : Floating Action Button / Footer 수상내역,위치,전화번호 등 주요정보를 열거
  20. 팝업 : 사용자에게 중요한 정보를 알려주거나 선택을 요청하기 위해 앱 콘텐츠 앞에 나타나는 모달형태
  21. 테이블 : 표
  22. 페이지디자인 메인 
  23. 페이지디자인 프로세스
  24. 페이지디자인 상세
  25. 페이지디자인 시스템

 

 

의문증이 드는 것은 행간을 auto로 하시기도하고 폰트사이즈의 10~12로 설정하여 조절하셨다. 기준이 있는 걸까? 

슬랙의 학습질문을 통해 멘토님께 여쭈게되었다.

답변을 바로 듣게되었고 가독성을 위한 것이라고 하였다.

타이포그래피라는 아티클을 보고 스터디를 더 해봐야겠다.


2. 생활 속 UX디자인의 사례

우리집 아파트 월패드

나의 생활 속에서 찾은 UX개선 사례는 아파트 월패드였다.

올해 이사 온 나에게 신기함을 주었던 월패드이다. 이전 아파트는 월패드는 없었고 놀러갔을 때 보았던 펜션들의 옛날 월패드 디자인보다 많이 발달한 것 같다.

또한 가족들 집의 월패드보다 e편한세상의 월패드 디자인이 UI가 좋았다. ( 알고보니 2021년에 레드닷 디자인을수상..) 

한 화면안에서 집안의 모든 것들을 제어할 수 있었다. 

조명, 공기질, 에어컨, 엘리베이터콜 등 입주민을 위한 편리한 기능들이 많았다. 

자주 까먹는 것이 주차를 어디에다 했는지인데 주차위치를 도면 및 기둥번호를 알려주고 가족차량의 출차여부도 알 수있다.

그리고 모바일기기의 앱을 통일해 일관된 서비스를 이용할 수있어 밖에서도 미쳐 끄지못했던 가스벨브나 조명을 끌 수있다.

앱에 대한 UX관점은 아직 해보지 않았지만 내일 레퍼런스 분석을 통해 진행해 봐야겠다.


  3. 나의 UX디자인에 대한 정의

한 줄로 적었다. 이론강의를 듣기 전이여서 통상적인 정의를 내렸는데 좀 더 전문적이고 UX디자이너의 관점에서 말할 수있게 공부하고 아티클도 많이 읽어봐야겠다.


디자인 강의 및 피그마 기초 강의

학부생이였을 때 이런 디자인 기초 강의를 들을 수 있다면 얼마나 좋았을까?

산업디자인과를 전공했지만 디자인적 역사와 발전 흐름, 인터페이스 디자인에 대한 배경을 알게되었다.

프리스쿨을 얼리버드에서 이미 들어서 피그마강의를 듣고 있는데 토큰에 대한 강의가 인상적이였다.

단순히 디자인하는 것이 아닌 실용적인 방법들을 통해 내가 정한 기준을 토대로 바레이션과 개발자에게 공유를 잘할 수 있다는 점이였다. 툴적인 내용보다 실무적인 관점으로 강의를 해주어서 이해가 빨랐다.

 


마무리      

내일은 아티클과 레퍼런스 분석을 하려고 한다.

잘 할 수있을지 걱정이지만 꾸준히 하다보면 나도 전문적인 시각을 갖추게 될 거라고 믿고 다음 주도 달려본다!