UXUI 디자인 스터디

[TIL] 21일차 학습일지 개인과제1차피드백 본문

UXUI 본캠프

[TIL] 21일차 학습일지 개인과제1차피드백

^수빈^ 2024. 1. 17. 21:09
728x90

오늘은 개인과제했던거 1차 피드백 받고 과제 디벨롭과 소프트스킬2 특강을 들었다. 튜터님께서 내가 질문한 내용도 답변해주시고 답답해하는 부분을 말하지도 않았는데 딱 말씀해주셔서 조금 신기했다. 아직 디자인시스템에 대한 이해가 완벽히 되지는 않아서 낼 마저 공부를 해야할 거 같다.


 

피드백 내용

 

피드백 받은 내용으로 더 디벨롭하고 정리를 해보자면

 

1. 버튼 컴포넌트 안에서 같아도 되는데 버튼의 모양은 중요도와 어포던스가 다르기때문에 UX적 관점에서 봤을때 버튼의 속성이 달라야 좋다.

2. 4배수나 8배수 ➡️ 패딩값, 폰트사이즈, 라운딩 값등 규칙을 만들어서 해야함

3. 프로퍼티, 컴포넌트, 레이어이름은 내가 알아볼수 있게 직관적으로 지어줘야함.

( 실무에서는 협업과 논의를 통해 정해지기도 한다.)

4. 버튼, 텍스트, 검색창 등 모든 경우의 수를 하나의 베리언츠안에서 다 정해줘야 한다.

5. Tertiary가 너무 흐려지면 Disabled처럼 보일 수도 있어서 시인성이 부족

6. 모바일에서는 hover가 쓰이지 않음 Press만 쓰임

7. 기존 앱에서 버튼의 상태 많이 관찰하기

8. 버튼이나 텍스트 컴포넌트 만들때 가로값은 컨텐츠에 맞게 늘릴 수도 있어서 버튼의 길이는 기본사이즈로 두기

 

(왼) 피드백 받기 전 / (오) 피드백 후

 

전에는 담기버튼, 구매하기 버튼, 로그인버튼 이렇게 나눠서 각각 따로 컴포넌트를 제작했었다면 피드백을 받고 공부를 하면서 하나의 버튼 컴포넌트안에 여러가지 경우의수를 만들어야 하는구나를 알게 되었다. 솔직히 어디가 완성도가 높은지 잘 모르겠지만 완성도가 높고 고민도 잘 해준거 같다고 하셔가지고 기분이 좋았다. 2차 과제제출때까지 더 완성도 높여야 겠다.

 

디자이너의 소프트스킬2 특강 들으며 메모한 것

 

소프트스킬1 특강때는 디자이너가 가져야 할 역량에 대해서 설명해주셨다면 이번 특강에는 디자이너가 어떻게 진행해야 하는지 어떤 관점으로 나아가야하는지에 대해서 특강을 진행해주셨다. 내 디자인작업물을 외주사이트나 사람들에게 공유하며 피드백도 받고 회사에서 처음받는 연봉기준으로 내 디자인의 가격이 어느정도일지 객관적으로 파악하는게 중요하고 이 프로젝트의 목적 파악, 기획단계에서 열심히 질문하고 참여하는것, 개발자와 협업할때 모르면 물어보고, 모르는것을 인정하고 더 배우는 자세를 가지고 있어야 한다고 하셨다.

 

디자이너의 하루는 디자인은 기본으로 잘 해야하지만 대부분 글쓰기와 말하기인 커뮤니케이션하는 시간이 많다고 한다. 논리적으로 말과 글로 설득시킬 수 있게 글쓰는 연습을 해야겠다.

 

글쓰기 연습하는 실습해보기

 

1. 손목패드

2. 마우스를 사용할때 손목의 피로도를 낮추고 손목염증생기는것을 예방해주기 위해 만들어졌다.

3. 안쪽 손목을 받치면서 사용하며 말랑말랑한 실리콘 재질로 되어 있어 만지면 기분이 좋아진다.

4. 컴퓨터 앞에 오래 앉아있어도 확실히 손목이 덜아프다. 하지만 앞 뒤가 명확하지 않아 어디가 앞으로 사용해야하는지 잘 모르겠고, 바닥부분이 미끄럼방지가 되어있지만 책상에서 자꾸 미끄러져서 움직인다는 점이 아쉽다.

 


https://mesign.tistory.com/48

 

웹 디자인 시스템 - 버튼 컴포넌트 스타일

이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다

mesign.tistory.com

https://mesign.tistory.com/49

 

웹 디자인 시스템 - 버튼 컴포넌트 상태 (State)

이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다

mesign.tistory.com

https://www.figma.com/file/Y5FvhEAzGwTfqNnBakyxWr/Material-3-Design-Kit-(Community)-(Copy)-(Community)?type=design&node-id=47909-2&mode=design&t=Odn1zVIUy3WYofMh-0

 

Figma

Created with Figma

www.figma.com

 

내일은 오늘 마저 공부했던 버튼 컴포넌트들이랑 디자인시스템들을 더 공부할 것이다.