이번에는 지난번에 이어, 도형들과 제공되는 에셋을 이용해 그럴싸한 모바일 페이지를 만들어 보려고 해요.
우선은 모바일웹인지, 앱인지, 또 더 웹화면의 해상도는 얼마나 줄건지, 앱의 os는 어떤건지 살펴두고 그에 맞게 제작하면 좋은데, 안드로이드의 경우 360x640 해상도의 사용자가 많이 있고, iOS의 경우 이거랑 해상도 비율이 달라서, 만약 같은 종횡비의 이미지를 추출해서 주게되면, 개발자들이 그렇게 달가워하지는 않을거에요. :)
먼저, 지난번 에셋을 하나 열어서 하나씩 바꿔나가볼게요.
파일을 열고, 아트보드 하나를 만들게요. 단축키는 window 기준 a 입니다.
만든 아트보드에, 기본적인 틀을 먼저 넣을거에요. 보통 처음 진입하게 되는 화면, 'splash'의 경우는 화면 구성이랑은 조금 다른 얘기니까, 처음 드러나는 페이지부터 간다고 보시면 되요.:)
단축키를 누르면, 해상도 기준으로 나타나는 리스트 중에, 안드로이드 모바일을 선택하고, 위의 Google Materials Guide를 사용해볼거에요.
아트보드를 길게 늘어뜨릴지도 모르니까, 스크롤을 세로로 두고, 뷰포트는 640 유지한 상태에서 아트보드의 하단을 쭉 끌어당기면 길게 늘어납니다.
상단과 하단에 구성요소를 '복사', '붙여넣기 해줍니다.'
기본 아트보드상태에서는 붙여넣기 한 다음 정렬로 상단, 하단에 위치시키도록 할 수도 있어요.
그리고 안쪽에 카드 이미지영역을 넣어볼게요.
하단의 상태바가 더 앞으로 와야 할 때에는 아트보드 선택했을 때 나타나는 요소들의 순서를 끌어서 올리거나, ctrl+shift+](맨 앞으로) 또는 ctrl+](앞으로) 를 눌러서 배치를 조정할 수 있고, 반대는 [ 를 눌러주시면 됩니다.
이 상태에서 ctrl+enter를 누르면, 이렇게 미리보기 화면이 나옵니다.
그리고 마우스를 화면 끝에 위치시켜보면, 드래그가 되는 걸 볼 수 있어요.
그런데, 화면이 다 함께 내려가죠
다시 편집화면으로 돌아와서, 프로토타입을 눌러줍니다. (단축키는 ctrl+tab)
그리고 스크롤 해도 그 자리에 있어야 하는 요소들 (상단 탭, 하단 탭, 플로팅 버튼 이미지까지) 을 선택하시고, (동시선택은 shift 누르고 선택하시면 돼요) 오른쪽 하단에 '스크롤 시 위치 고정' 을 체크해줍니다.
그리고 다시 프로토타입을 확인하면, 아래 그림처럼, 다 제자리에 위치하고 있는 걸 볼 수 있어요.
