-
[7주차] #패스트캠퍼스 #UX/UI디자인 #열공챌린지 #iOS클론디자인(3~4)카테고리 없음 2022. 6. 13. 12:10
[패스트캠퍼스_UX/UI 디자인 첫걸음 시작하기] 7주차 학습 내용
□ Home indicater bar
Home indicater bar는 액티브뷰, 시트 모달 등 모든 인터페이스 영역 중에서
최상위에 배치되어야 함.
홈으로 돌아갈 수 있기 때문에.
□ Activity Views
액티비티 뷰 안에 영역들은 하나의 컴포넌트로 각각 만들지만,
액티비티 뷰 시트는 하나의 뷰로써 보기때문에 시트안에 제목이 있는 경우는 시트를 포함해서 만듬.
액티비티 뷰(Activity View) 또는 액션 시트(Action Sheets) 같은 경우는
프로토타입으로 볼 때 기준점으로 잡은 디바이스의 사이즈로 맞춘 뒤에
팝업을 얹혀주는 방법으로 진행함.
(뒤에 있는 스크린은 사실상 스크롤이 되지 않는데, 스크롤이 되게끔 체크하면
다같이 스크롤이 되기때문에.. 팝업에서 스크롤 되게끔 밑에 더 볼 수 있다 정도로만 표시함.)
□ 아이콘 디자인
아이콘은 디자인 시스템 안에서 보통 작업함.
atom 원소 - 아이콘 / 컬러 스타일 / 텍스트 스타일 (더 이상 쪼갤수가 없다)
components 컴포넌트 - 아이콘 / 컬러 스타일 / 텍스트 스타일 (구성요소, 원소들의 집합)
patterns 패턴 - 컴포넌트 + 컴포넌트 + 원소 (앞으로 자주 쓰일 요소를 묶어서 패턴을 만듬)
□ iOS 아이콘(SF Symbol)
- iOS에서는 아이콘을 아이콘폰트로 씀.
- 휴먼 인터페이스 가이드 > 디자인 으로 가서 SF Symbols3(현재는 3버전) 다운로드 후 피그마에서 폰트를 SF Pro로 바꿔주면 아이콘이 뜸.
- iOS 아이콘은 사이즈로 조정하지 않고 폰트 크기로 조정함.
- 크기에 따라서 두께도 달라지는게 단점.
- 또, Thin으로 폰트 두께를 얇게 쓸수 없음. 일반 모니터에서는 깨져보임.
- iOS 아이콘은 명사로되어있음. (휴지통 - trash / 작성하기 - pencil 이런식으로..)
- 행동이나 동작으로 짓지 않음. (작성하기-write X)
하지만, 하나의 메타포더라도 전달하려는 메시지는 다를 수 있음.
☆
N(명사) - 외연 - Star
V(동사) - 내연 - Favorites / VIP / Review ratings
겉으로는 별인데, 안에 담고있는 의미는 즐겨찾기, VIP, 리뷰달기 등...그래서, 아이콘의 이름은 외연 중심의 '명사'로 지어야 하고,
그 때 사용되는건 여러가지 의미를 담고있을 수 있다.
□ 아이콘 가이드
- Circle은 똑같이 18dp로 만들면 시각적으로 더 작아보이기 때문에 조금 더 크게 만들어 줌.
- Vertical과 Horizontal은 각각 사각형 따로따로 만들어줘야함.
- vertical 만든 것을 복사해서 방향 돌려서 horizontal로 만들면 개발단계에서 꼬일 수 있기 때문에.
- icon마다 각 가이드에 맞춰서 만들어 주고 BG박스(흰색정사각 28px)는 없애주고 컴퍼넌트.
□ 아이콘 만들기
두께는 2px로 맞춤. (1px은 너무 얇아서 잘 보이지 않는다.)
머터리얼 그리드 안에 맞춰서 도형과 펜슬 이용해 그려준다.
사각형 안쪽 모서리는 outline stroke로 면을 따주고
안쪽 모서리 꼭지점만 shift누르고 선택해준 다음에 모서리 조정하면 됨. (위에 캡처본은 안했다..^^;)
이 때, stroke는 꼭 center로 맞춰주고
다 완성된 아이콘은 outline stroke로 꼭!!! 해줘야함.
(**Union이나 Subtract 등 으로 묶어둔 것들 → 최종본 넘기기 전에 outline stroke)
그리고, 그 면들끼리 union 합쳐주기.
작업 중이나 최종 전에는 stroke는 일단 살려둠.
그러고 나서 개발팀으로 최종본 넘길 수 있음!
**왜냐하면, svg나 export할 때 아이콘 사이즈가 커지거나 작아지면 배치가 이상해지고 깨져보이기 때문에.
아웃라인 스트로크 하고나서 유니온 해줌 **아이콘 사이즈 조정할때는 스케일(단축키 K)로 바꾼 다음 바꿔줘야 비율이 그대로 유지됨.
□ 패스파인더
- union : 도형 합치기
- subtract : 여러 도형 중 맨 아래 도형만 남기고 겹친 부분을 뺀다.
- intersect : 도형끼리 교집합된 부분만 남긴다.
- exclude : 도형끼리 교집합된 부분만 빠지고 그 나머지는 남는다. (= 교집합 반대로 처리)
- 그리고, exclude는 홀수로 겹친 부분은 남고, 짝수로 겹친 부분은 빠진다.
- flatten : 위 패스파인더해서 완성된(더이상 수정 없는) 오브젝트 합쳐주기 (= command+E)
□ 플로우 차트
플로우 차트 : 어떤 흐름으로 간다
이미 표준으로 쓰는 기호가 있음.
출처 : https://brunch.co.kr/@hyoi0303/1 피그마 커뮤니티에 flow chart 로 검색하면 많은 파일들이 뜨지만,
이동 흐름을 표시할 때 한계가 있음.
플로우 차트를 만드는 회사도 있고,
아예 안만드는 회사도 있고,
프로토타입으로만 만들어서 개발자와 소통하는 경우도 있지만.
플로우 차트를 만들어야지만
예상치 못한 부분(예, 아니오인 경우 등)도 설계의 측면에서 만들 수 있다.
□ 오버 플로우(Over flow)
유저 플로우 차트를 그리는 툴.
주니어 디자이너라면 꼭 플로우차트를 만드는 것이 좋음.
다만, 오버플로우는 유료임.
피그마에서 오버플로우 플러그인 켰을 때 Export할 때 1x보다 2x로 하는게 좋음. 그래야 폰에서 안깨져보인다.
오버플로우와 피그마 다른점은 연결한 화살표가 계속 따라온다는 점.
기본적으로 왔을 때 이 화면이 열려야 된다 라는 것 등
부가적인 설명들을 써줘야함.
예, 아니오 경로를 계속 만들 수 있고
다른 팀원들이 보고 코멘트도 달 수 있음.
◎ 프로토타입이랑 오버플로우를 할 경우 차이점
오버플로우는 무조건 오버플로우에서 "시작" 버튼을 시작으로
(새메시지를 가거나 받은편지함으로 가거나 VIP로 가거나 하면서)
다른 페이지로 이동하고,
한 화면에서 모든 전체 페이지들의 흐름을 관리하고 볼 수 있다.
피그마에서는 페이지 별로 나눠서 작업을 한다. (메인 / 각각의 서브페이지를 나눔)
나중에 개선할 때 그 페이지만 개선하고, 버전관리를 하고 업데이트를 하기 때문에.
그래서 페이지 안에서만 이동만 가능함. (전체적인 흐름을 볼 수 없음.)
but, 실제로 프러덕 디쟌을 하게되면
실무에서도 피그마 프로토타입처럼
오버플로우에서도 각 페이지별로 플로우하는게 대부분임.
그리고, 피그마에서도 더 크게 나눠서 한 파일 안에 페이지별로 관리하는게 아니라
파일마다 각각 페이지를 따로 만들어서 제작함.
각 파일마다 페이지는 버전별로 관리함.
메인 화면 -> new file로 만들고 -> 페이지에 각각 모바일 앱, 데스크탑 웹, 태블릿 웹, 태블릿 앱 등등 버전별로 나눠서 작업함.
이렇게 각각의 스크린별로 나눠서 작업해야
파일 관리하기가 수월하고, 파일 용량도 무겁지 않고, 나중에 홈에서 검색할 때 기능별로 찾기도 쉽다.
□ 프로토타이핑 / iOS 트랜지션
!!참고!!
실무에서는 전체 앱을 다 프로토타입 해볼 수 있는 회사는 거의 없음.
특정 기능을 데이터를 보고 측정하고 개선해나가고를 반복하기 때문에.◎ Transition(트랜지션) : 터치하면 어디로 가는지, 화면간의 이동
◎ 레이어 이름이 같아야 프로토타입이 작동됨.
ㅇ -> ㅁ
ㅁ <- ㅇ
이렇게 갔다가 왔다가 해야되는 것들.
◎ iOS는 화면 이동 일관성(방향성)이 계속 있어야함.
아이콘 > 클릭시 새로 나오는 화면은 오른쪽에서 왼쪽으로 나와야하고,
아이콘 < 클릭시 새로 나왔던 화면은 왼쪽으로 다시 밀려나야함.
◎ iOS는 무언가 새로운 화면이 열릴 때는 무조건 아래에서 위로 나타남.
**안드로이드는 방향성이 있지는 않음.
◎ Flow starting point
시작점을 모든 페이지에 다 연결하는게 번거로우니, 스타트포인트를 추가해서 프로토타이핑 화면에서 각 페이지를 가게끔 만들수 있음.
좌측에 레이어 목록처럼 각 페이지로 갈 수 있게끔 생겨남.