피그마 개인정보 보호 정책 자연스럽게 넘어가게하는 컴포넌트 만들기(유저가 자연스럽게 넘어가게 만드는 방법)

오늘은 개인정보 보호 정책을 스무스하게 넘어가기 위한 체크박스를 만들어 볼 건데요! 유저가 빠르게 자사의 홈페이지에서 동의를 받는 방법입니다. 물론, 한국에서 유저의 클릭을 하지 않고 넘어가게 하는 정책에 대한 가이드라인은 회사의 정책마다 다른 것 같습니다. 일단, 이번에 만드는 것은 유저가 클릭을 하지 않고 자연스럽게 클릭이 되는 방식으로 유도해 보겠습니다.

 

완성본!

완성본

개인정보 보호 정책에 동의하는 체크박스 만들기 

1. 체크박스 만들기

• 체크박스 만들기
  크기 : 20x20
  테두리 크기 : 2
  fill : -(삭제/빼기)

그림_1

2. 체크박스 컴포넌트 변환

• 체크박스를 선택한 후 컴포넌트로 변환
  체크박스 전체 컴포넌트를 선택 자산 명칭 변경 : state
  values 값 변경 : 차례로 false/true
• 왼쪽 패널 assets : 체크박스 인스턴스를 깨내고 state 값 옆에 버튼을 on으로 바꾸면 왼쪽에 있는 컴포넌트가 우측 컴포넌트를 복제

그림_2

3. 체크박스 색상 변경 및 효과 주기

• 체크박스 색상 : 06 AB66
  1) Effects : inner shadow
  2) inner shadow Y값 변경 : -2

그림_3

4. 개인정보 보호 정책 동의하기 

• 텍스트 입력 : "지금 입력하신 내용을 토대로, 귀사의 개인정보가 당 사의 개인 정보 보호 정책에 동의하시겠습니까?
  내용은 엉망으로 썼습니다(왜냐면, 회사마다 다른 정책이기에 워딩/문구는 기획자의 몫이기 때문입니다.
  1) 텍스트 fill conatainer 변경
  2) 전체를 오토레이아웃 설정 : 초록색 체크박스와 텍스트 내용 넓이 8
  3) 오토레이아웃 명칭 : 체크박스 내용 

그림_4

5. 컴포넌트 변환하기
조금 어려울 수 있으니 순서대로 따라와 주세요!

• 1) 컴포넌트 변환 : 체크박스와 텍스트를 합쳐서 컴포넌트로 변환
• 2) 컴포넌트 3개 복제 
• 3) 첫 번째 텍스트를 클릭 단축기 : 'command+option+A' → 텍스트 레이어 생성 → create property 생성
• 4) 첫 번째, 두 번째 체크박스만 선택 : 버튼 끄기(state/hover/selected)
• 5) 자산 정보 수정 
  5-1) state/hover/selected

그림_5

6. 프로토 타입 연결하기

각 자산을 이제 프로토타입으로 연결하는 방법입니다. 이제 끝

• 1) state → hover : while hovering / change to : property1 hover → instant
• 2) hover → selected : on click / change to : property1 selected → instant
• 3) selected → state : on click / change to : property1 stated → instant

그림_6

 

7. 완성본은 다음과 같습니다!