[TIL] 1008 학습일지

[강의]체계적으로 배우는 피그마 기초 완전 정복 2주차

5-7강

 

Frame & Constraint

Constraint
- 제약(조건), 제한이라는 뜻
- Auto-layout을 정말 자동 레이아웃으로 만들어주는 기능으로,
   오토레이아웃 '내'의 개체들이 움직이는 방식을 제한한다는 뜻(오토레이아웃 X)
  (Parent Container 크기가 변할 때, Child Container는 어디를 기준으로 변할지 정함)
*오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있음.
*하지만 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 대 규칙을 만들어줘야 함.

- 옵션 설명(★★★★★)-주요 기능이니 꼭 실습 여러번 할 것
  1)Left/Right: 도형의 형태는 변경되지 않으면서 위치만 변경
  2)Scale:가운데에 고정해주는 것(도형 사이즈 변동 X)
  3)Left & Right, Top & Bottom: 여백은 그대로 두되, 도형사이즈가 변경

 

Frame resizing
- 리사이징의 종류
  1)Fixed: 고정값(공통)
  2)Hug: Child container 크기에 맞춰 조정(Parent만 쓸 수 있음)
  3)Fill: Parent container 크기에 맞춰 조정(Child만 쓸 수 있음)

 

 

Position

- 위치값 설정. 고정하거나 스크롤링으로 함께 움직이는 등 포지션의 옵션을 정해둘 수 있다.

- 실제 개발에서도 사용하는 개념으로, CSS(디자인과 레이아웃을 위한 코드)에서 사용할 수 있음

 

1)Static(스태틱)

일반적인 요소들이 가지고 있는 포지션. 기본값으로, 스크롤과 함께 움직임

 

2)Fixed(픽스드)

화면 전체를 기준으로, 스크롤하더라도 항상 고정된 위치에 있음(헤더, 앱 하단 버튼 등)

 

3)Absolute(앱솔루트)

Fixed와 유사하지만, 고정되는 기준이 컨테이너 안(전체 스크롤X) 본인이 담겨있는 부모 컨테이너 기준

4)Sticky(스티키)

스크롤에 따라서 기본값과 Fixed를 전환하는 포지션.

스크롤을 따라 움직이다가 특정 위치에서부터는 상단에 고정됨

---

[아티클스터디]게임 속 팝업의 버튼 UX디자인 - 좋은 사례 VS 나쁜 사례

https://prettygoodsun.tistory.com/42

게임 속 팝업의 버튼 UX 디자인 - 좋은 사례 VS 나쁜 사례

*제 2의 나라 / 디스라이트 / 카트라이더 드리프트 / 일곱 개의 대죄 업데이트 팝업을 예시로

 

 

[아티클 요약]

Bad Case

• 디스라이트
  1. 업데이트에 대해 확인/취소 옵션을 선택할 수 있음 → 이는 앱 이탈로 연결될 수 있음.
  2. ‘확인’→ ‘업데이트’와 같이 버튼 기능 직접적 표현
• 7개의 대죄
• 업데이트 팝업의 ‘아니오’를 누르면 팝업이 다시 뜸 → 사실상 기능하지 않는 버튼
• 카드라이더: 드리프트하지만, 닫기버튼을 삭제하는 것이 더욱 효과적
• 팝업 우상단에 닫기[X]버튼이 있어 강한 어포던스를 가지게 됨(주변의 방해를 덜 받음)

<aside> 💡

*어포던스(Affordance) (https://prettygoodsun.tistory.com/10)

형태나 이미지가 행위를 유도하는 힘.

ex)마치 의자를 보면 앉고 싶고, 손잡이를 보면 돌리고 싶고, 침대를 보면 눕고 싶어하는 행동

*어포던스 디자인

• 어떤 서비스/시스템을 만들 때, 디자인된 물건만 보더라도 직관적으로 사용법에 대해 짐작하게 하는 것
• 물건을 쉽게 사용하도록 인도해주는 장치
• 좋은 디자인은 형태만으로도 정확하게 작동 방식을 알려줌 </aside>

Good Case

• 제 2의 나라
  1. 이탈 위험 사전차단: 업데이트 취소하기, 창 끄기(X)와 같이 이탈 버튼 삭제
  2. 주요기능 버튼 사이즈업: 업데이트로 이동하기 버튼만 크게 남김
  3. 사용자에게 요구하는 행동 구체적 표기: 버튼 레이블 ‘확인’과 같이 모호한 표현 X. 상황에 알맞은 ‘이동’이란 표현 구체적 사용
  4. 아이콘으로 간결하게 : ‘!’아이콘 활용하여 사용자가 주의깊게 봐야하는 내용 시사
  5. 설명문구 : 현재 상황과, 사용자 행동 요구가 잘 담김. 설명문구 속 ‘이동’이 버튼 레이블과 일치하여 혼동이 없음
  6.  

[인사이트]

• 업데이트로 유도하고자 하는 간단한 팝업임에도 행위에 대해 버튼의 사이즈, 팝업 및 레이블 속 문구, 시사하는 내용, 워딩의 일치 등 여러 장치들이 숨어있다. 사용자가 직관적으로 알 수 있게 하는 장치들이 인지부하를 줄이는 좋은 UX라는 것을 알았다.
• 사용자에게 선택 옵션을 많이 주는 것보다, 옵션을 아예 주지 않는 것이 더욱 편리할 수도 있는 것 같다.
• 텍스트를 줄이고 느낌표로 표현하는 것처럼 직관적이고 표현이 중복되지 않도록 하는 것이 잘 설계된 UX인 것 같다.
• 게임 업데이트의 경우, 많은 데이터를 요구하거나 소셜게임이 아니라면 굳이 업데이트하고 싶어하지 않는 유저도 있을 것 같은데 그 부분은 보통 고려하지 않는지 궁금하다.

 

팀원 전체의 인사이트

[공통 인사이트]

• 버튼을 디자인할 때에는 작은 요소 하나라도 모두 의미가 있는 버튼이어야 한다.
• 사용자 행동을 유도하는 기능이 가장 중요하고, 모든 요소는 이를 위해 설계되어야 한다.
• [확인/취소] 보다는 [이동]이 더욱 직관적으로 행동을 유도하는 표현이라는 것이 새로웠다. 이처럼 사용자가 현재 상황에서 ‘그 다음’에 해야하는 행동에 대해 정의하여 버튼 레이블을 설계하는 것을 고려하는 것이 좋은 UX라는 것을 깨달았다.

[의미 있었던 의견]

• 우상단에 [닫기]버튼은 어떤 창에서 기본적으로 들어가는 필수요소라 생각했는데, 생략하는 방식도 있다는 것을 알게 되었다.
• 스토리 진행이 필요한 게임(캐릭터나 스토리가 나올 때에 다같이 업데이트해야 되는 게임들)의 경우에는 용량이 많이 필요하더라도 업데이트가 필수지만, 그렇지 않은 게임들도 있기 때문에 상황에 따라 적절한 UX를 적용하여야한다
• 쿠팡 멤버십 / 회원 탈퇴와 같이 사용자의 편의성보다는 기업의 이득을 위한 디자인(다크패턴)이 좋은 디자인인가 고민해보아야한다.