개인 과제 피드백

개인과제 피드백을 받았다. 이틀만에 작업한 과제였고, 조금 부족했던거 같다.

 

필수 요소인 버튼 컴포넌트를 따로 만들지 않고 작업했다는걸 피드백 내용을 듣고 알았다. 버튼 컴포넌트를 만들지 않고 버튼 영역 컴포넌트를 만들었더라.. 기존 컴포넌트 요소들을 삭제하고 다시 재수정 하였다.

해설영상과 함께 제공받은 피그마 파일을 하나씩 뜯어 보면서 어떻게 컴포넌트를 만들고 페이지를 작업하는지 이해했다. 

 

 

가격과 '원'을 분리하여 디자인하기

가격은 데이터를 불러오고 '원'은 고정적인 레이블이기 때문에 개발까지 고려하여 분리하여 디자인한다.

ㄴ 사진은 가격과 원의 사이즈가 동일하지만, 디자인에 따라서 '원'을 더 작게 표현하기도 한다.

 

 

텍스트의 줄바꿈을 고려하여 오토레이아웃하기

과제를 진행할 때 프레임에 뿌리듯 배치하며 작업하였다. 이 때 상품 이름과 같은 텍스트의 줄바꿈을 고려하고 작업하였지만, 오토레이아웃을 어디부터 어디까지 걸어야 하는지 모르겠더라. 각 섹션 하단의 마진값을 여유있게 하여 섹션마다 오토레이아웃을 걸어두면 좋겠다는 의견을 받았다.

 

 

컴포넌트 이름 정의 및 정리하기

난 평소에 바탕화면도 제대로 정리 안하고 사용하기에 습관처럼 컴포넌트 요소들을 정리 하지 않았다. 아수라장이던 컴포넌트들의 위치와 통일성 없는 이름을 다시 고치고, 파일을 처음 보더라도 알아볼 수 있게끔 컴포넌트를 정리하였다.

초반에 시간이 많이 들긴 하지만 그만큼 일의 효율성을 올려줄 거란것을 정리하면서 느꼈다.

 

시각보정하기

아이콘은 프레임 안에 위치하는것을 기본으로 한다. 근데 여기서 각 아이콘의 크기가 다르기에 같은 프레임 다르게 보인다. 이 경우 아이콘마다 시각적으로 보정을 해주어야한다. 사진과 같은 화살표의 경우 프레임 가운데 위치하지만, 그리드를 껐을 때 오른쪽 아이콘과 좌우 대칭이 깨져보인다. 이 때 프레임안에 화살표를 옮기지 말고, 프레임 자체를 움직여 좌우 대칭을 맞춰야 한다.

 

멘탈모델과 어포던스

용어를 정리하면서 멘탈모델과 어포던스에 대한 차이점을 생각했다. 둘 다 비슷한 느낌인데 명확하게 구분 지을 필요가 있어서 비유를 들어 정리해 보았다. AI에게 물어보니 친절하게 답변을 받아 이해하는데 도움이 됐다.

 

 

이번주는 UI보다는 UX에 집중하는 시간이였다. 사실 집중을 잘 한지 모르겠다. UI도 아직 잘 모르는데.. 아직 갈 길이 멀다. 매 강의마다 UX에 대한 기법과 정의, 활용법을 알려주었는데 저번주 과제처럼 분산된 자료를 하나로 모으는데 도움이 되는 내용이였다. 

잘 알았고.. 잘 이해했는데 어떻게 활용해야하는지 감이 안잡혔다. 튜터님께서는 디자인에 대한 지식들이 넘치는 과도기때 여러 기법들이 생긴거라고 했다. 일단 이런게 있구나~ 정도로만 익혀두고 다음주 과제를 하면서 활용해 보려고 한다.