[240613] 디자인 스낵, Figma 활용법(1) 복습

🗓️ 오늘 한 일(UXUI 디자인 입문)

✅ 디자인 스낵

✅ 피그마 활용법(1) 1~3주차 복습

 

---

 

[디자인 스낵]

 

 

📝 나의 의견

라디오 버튼이 사용하기에 더 편하다고 생각한다.

- 선택지가 2, 4, 6, 8, 10이고 그 사이에 3, 5, 7, 9를 선택할 수 없다면 단순히 버튼을 누르는 게 더 낫지 않을까?

-  라디오 버튼이 점수라는 게 더 잘 드러나는 형태로 변경될 필요가 있어 보인다.

 

🗣️ 팀원 분들의 의견

- 점수가 연결성이 있기 때문에 슬라이더의 형태가 더 편하지 않을까?

- 정해진 범위 구간 내에서 지점을 선택하는 것이 아니라 정확한 점수를 선택해야 하는 거라면 라디오 버튼이 나은게 아닐까?

- 라디오 버튼의 형태가 너무 로또 번호 같아서 점수 같지가 않다.

 

💬 댓글 창 의견

- 점수형 답변에는 슬라이더가 어색하다.

- 슬라이더에서는 UI에 집중하게 되고, 라디오 버튼에서는 수치에 집중을 하게 된다. 그래서 슬라이더를 이용하면 평균을 기준으로 더 높은지 낮은 지를 평가하고, 라디오 버튼을 이용하면 점수가 몇 점인지 평가하는 느낌이다.

 

---

 

 

 

 

📝 나의 의견

CTA 버튼이 더 사용하기에 편하다고 생각한다.

- 자동으로 섹션이 넘어가게 되면 잘못 입력된 값을 수정하기 위해 다시 앞 단계로 이동해야 하는데 CTA 버튼을 이용하면 스스로 잘못 입력한 값을 다시 한번 확인할 수 있는 기회가 생기지 않을까? 

 

🗣️ 팀원 분들의 의견

- 주민등록번호를 틀리는 경우는 흔치 않고, 사용자가 직접 버튼을 누르지 않아도 섹션이 넘아가기 때문에 자동확인 및 섹션 이동이 편하지 않을까?

- 디자인적인 관점에서 화면 내에 구성요소를 줄이는게 더 좋은 형태로 보여서 자동확인 및 섹션 이동이 편한 것 같다. 

- 잘못 입력한 값을 수정할 수 있어서 CTA 버튼이 나은 것 같다.

ㄴ 잘못 입력한 값은 시스템적으로 에러 표시를 하면 되지 않을까?

    ㄴ 예를 들어, 000101을 실수로 000102로 입력한다면 시스템 자체적으로는 잘못된 값이라고 인지하지 못하기 때문에 스스로 확인하는 수밖에 없지 않을까?

 

💬 댓글 창 의견

- UX의 측면에서는 자동확인 및 섹션이 더 좋아 보이는데, 개발자의 입장에서는 유효성 검사가 필요하기 때문에 CTA 버튼이 더 좋다.

- 입력 데이터의 유효성을 어떻게 판단하냐에 따라 다를 것 같다. CTA 버튼은 버튼의 상태 등으로 데이터의 유효성을 판단할 것이고, 자동확인 및 섹션이동은 하단에 알림 문구를 넣는 등의 방식을 이용할 텐데 정확한 방식을 알 수 없어서 애매하다.

 

---

 

 

 

📝 나의 의견

가이드 영역에 별도 표기하는게 더 좋은 것 같다.

- 버튼에서 너무 많은 정보를 확인하게 하는 건 좋은 것 같지 않다. 버튼은 비활성화 상태라는 것 자체가 그 의미를 표현할 수 있다고 생각한다. 

 

🗣️ 팀원 분들의 의견

- CTA에 표기하는 게 다음 단계로 넘어가기 이전에 직관적으로 알 수 있게 해주는 것 같다.

- 가이드 영역이 위쪽에 있어서 시선이 아래 쪽으로 향했다가 다시 위로 이동하게 해서 불편한 것 같다. 그런 측면에서는 CTA버튼이 나아 보인다. 가이드 영역 자체를 아래쪽으로 이동시키면 가이드 영역을 따로 두는 것도 좋은 것 같다.

 

💬 댓글 창 의견

- CTA 버튼에서 상태가 활성화 돼서 "Connect Wallet"을 누르면 지갑을 연결하는 창으로 이동하면 좋을 것 같다.

- 잘못된 부분을 바로 수정해야 하는데 CTA에 있으면 어느 지점에서 잘못된 것인지 바로 확인이 불가능해서 텍스트 필드 혹은 입력값을 다시 전부 점검하면서 오류를 수정해야 하기 때문에 가이드 영역이 좋은 것 같다.

 

---

 

 

 

 

📝 나의 의견

윈도우 10이 더 나은 것 같다.

- 윈도우를 써본 적이 별로 없어서 화면만으로는 잘 모르겠지만 윈도우 11의 경우, 사용자 프로필이나 전원 버튼 등의 위치가 분산되어 있어서 사용하기에 불편해 보인다.

- 또한, 윈도우 10에서는 검색창이 바로 보이는데 윈도우 11의 경우에는 버튼을 눌러야 검색 창으로 이동한다는 점에서 사용성이 좋지 않아 보인다.

 

🗣️ 팀원 분들의 의견

- 제이콥의 법칙에 따라서, 윈도우 10 이전까지 모두 메뉴가 좌측 정렬이 되어 있었기 때문에 익숙한 형태인 윈도우 10이 더 편한 것 같다.

- 맥을 이용했었는데 맥은 모든 메뉴가 가운데 정렬이 되어 있어서 가운데 정렬된 형태인 윈도우 11이 더 좋은 것 같다.

 

 

💬 댓글 창 의견

- 나는 맥이 편하다.

- 한 눈에 볼 수 있는 윈도우 11이 좋다.

- 익숙한 형태인 윈도우 10이 좋다.

 

 

---

 

 

[Figma 활용법(1) 복습]

다시 정리하고 싶은 부분

- 프레임화한 자식 오브젝트는 부모 프레임의 크기 변화에 영향을 받지 않지만(오토레이아웃 제외) 그룹화하면 그룹의 크기 변화에 따라 자식 오브젝트의 크기가 변한다.

 

- 오토레이아웃을 이용하여 반응형 디자인을 만들 때,

최상위 오브젝트를 제외한 비율을 반응형으로 이동시키고 싶은 모든 오브젝트에 Fill 값을 적용해야 반응형으로 동작한다.

 

오토레이아웃을 이용해서 반응형으로 앱 클론을 해봄

(맨 오른쪽이 원본 사진/ 나머지는 순서대로 가로 너비 320/ 375/ 640)