0605 (월) 앱 화면 구현 기본- kakaotalk 구현하기

드래그 -> 스와이핑

하단 바 -> 탭 바

 

화면 디자인 시, 좌측 우측에 침범 하면안되는 안전공간(margin)이 있음

보통 디폴트로 10,12 등으로 둠. 레이아웃 그리드 사용 margin에 원하는 값 입력

 

검색창 아이콘 양옆정렬+텍스트 중앙 정렬 원할 때

검색창 두 아이콘 오토레이아웃 x로 떨어뜨리기 + absolute position

or 한쪽 개체 잠금 후 위치 고정

 

use as mask -> 밑 오브젝트 모양을 프레임으로 잡음

앱 ui 상에서 상단 바나 하단 스테이터스 바 등은 모든 디자인에서 공통적이기 때문에

피그마 홈> explore community> 원하는 소스 검색을 통해 공유된 자료 쉽게 얻을 수 있음.

사용한 커뮤니티: ios browser UI kit

---

실습 리뷰

 

카카오톡 구현하기에서 가장 어려웠던 점: 

chat message 구현할 때 말풍선의 형태를 갖추고 컴포넌트 등록 하는 과정

solution : 말꼬리 형태의 벡터 도형과 오토레이아웃+fill 잡은 텍스트 합치는 과정에서

벡터를 오토레이아웃 안으로 삽입 후 벡터에 absolute position 부여 > 한번에 잡아서 컴포넌트 마스터로 등록

> 상단 +버튼 눌러서 컴포넌트 세트로 등록 후 속성 부여

= 이렇게 해야 채팅방 구현 시 말풍선 크기에 따라 시간,읽음 여부가 움직임!

 

위와 같은 화면 구현시에는 드래그 +스마트 애니메이션

1,2,3 번 모두 '읽음,나가기 사각형'이 배경에 있어야 하고

3번 상태에서는 투명도 0% + height 0.0001(0입력시 인식 X) 부여해야 사라진 상태로 구현 가능

keypad는 open overlay, manual 로 잡아야 floating 효과 적용 가능.

 keypad 프레임으로 전환이 아니라 해당화면을 채팅방 화면 위로 겹치는 것이기 때문