반응형
오늘은 개인정보 보호 정책을 스무스하게 넘어가기 위한 체크박스를 만들어 볼 건데요! 유저가 빠르게 자사의 홈페이지에서 동의를 받는 방법입니다. 물론, 한국에서 유저의 클릭을 하지 않고 넘어가게 하는 정책에 대한 가이드라인은 회사의 정책마다 다른 것 같습니다. 일단, 이번에 만드는 것은 유저가 클릭을 하지 않고 자연스럽게 클릭이 되는 방식으로 유도해 보겠습니다.
완성본!
개인정보 보호 정책에 동의하는 체크박스 만들기
1. 체크박스 만들기
- 체크박스 만들기
크기 : 20x20
테두리 크기 : 2
fill : -(삭제/빼기)
2. 체크박스 컴포넌트 변환
- 체크박스를 선택한 후 컴포넌트로 변환
체크박스 전체 컴포넌트를 선택 자산 명칭 변경 : state
values 값 변경 : 차례로 false/true - 왼쪽 패널 assets : 체크박스 인스턴스를 깨내고 state 값 옆에 버튼을 on으로 바꾸면 왼쪽에 있는 컴포넌트가 우측 컴포넌트를 복제
3. 체크박스 색상 변경 및 효과 주기
- 체크박스 색상 : 06 AB66
1) Effects : inner shadow
2) inner shadow Y값 변경 : -2
4. 개인정보 보호 정책 동의하기
- 텍스트 입력 : "지금 입력하신 내용을 토대로, 귀사의 개인정보가 당 사의 개인 정보 보호 정책에 동의하시겠습니까?
내용은 엉망으로 썼습니다(왜냐면, 회사마다 다른 정책이기에 워딩/문구는 기획자의 몫이기 때문입니다.
1) 텍스트 fill conatainer 변경
2) 전체를 오토레이아웃 설정 : 초록색 체크박스와 텍스트 내용 넓이 8
3) 오토레이아웃 명칭 : 체크박스 내용
5. 컴포넌트 변환하기
조금 어려울 수 있으니 순서대로 따라와 주세요!
- 1) 컴포넌트 변환 : 체크박스와 텍스트를 합쳐서 컴포넌트로 변환
- 2) 컴포넌트 3개 복제
- 3) 첫 번째 텍스트를 클릭 단축기 : 'command+option+A' → 텍스트 레이어 생성 → create property 생성
- 4) 첫 번째, 두 번째 체크박스만 선택 : 버튼 끄기(state/hover/selected)
- 5) 자산 정보 수정
5-1) state/hover/selected
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
7. 완성본은 다음과 같습니다!
728x90
반응형
