Comp CC를 사용하여 앱 초안을 만들고 Photoshop에서 대지를 사용하여 레이아웃을 활용하는 방법을 살펴봅니다. 그런 다음 모바일 앱 개발자에게 에셋을 전달하기 전에 iOS 디바이스에서 앱 디자인을 미리 봅니다.
이 튜토리얼을 완료하려면 Photoshop CC 2015가 필요합니다.
(선택 사항) Creative Cloud Libraries에 샘플 에셋 복사
이 앱 초안을 활용하려면 Adventure Guide Mobile App 라이브러리의 에셋을 사용하십시오. Creative Cloud에 저장을 클릭하여 라이브러리를 자신의 계정에 복사하면 Comp CC 및 Photoshop에서 바로 에셋을 이용할 수 있습니다.
참고: 라이브러리를 저장하려면 Creative Cloud 계정에 로그인해야 합니다.
Comp CC에서 레이아웃 구상
Comp CC를 실행한 다음 + 기호를 눌러 새로운 프로젝트를 만들고 프로젝트에 가장 적합한 형식을 선택합니다. 이 튜토리얼을 따라 하려면 iPhone 6 형식을 선택합니다.
사각형을 그려 내비게이션 막대와 바닥글을 만듭니다. 이미지를 가져올 영역을 X로 표시합니다. 사각형을 그린 다음 점을 찍어 표제 텍스트를 만듭니다. 몇 줄의 선을 긋고 점을 찍어 여러 줄로 구성된 텍스트를 만듭니다. Comp는 그린 제스처를 개체로 변환합니다.
팁: 화면 상단에 있는 톱니바퀴 아이콘을 누르면 그리기 제스처에 대한 도움말을 확인할 수 있습니다.
에셋으로 구성 요소 구체화
내비게이션 막대를 누른 다음 화면 하단에 있는 색상 아이콘을 누릅니다. 피커 또는 Adventure Guide 라이브러리에서 색상을 선택한 다음 바깥쪽을 누릅니다. 바닥글에도 색상을 추가합니다.
이미지 자리 표시자를 누른 다음 화면 하단에 있는 그래픽 아이콘을 누릅니다. 내 라이브러리를 누르고 Adventure Guide Mobile App 라이브러리를 선택합니다. _riders 사진을 눌러 자리 표시자에 놓습니다. 원하는 경우 사진을 두 번 누르고 집기 제스처를 사용하여 사진 크기를 조정합니다.
텍스트 및 아이콘 추가
화면 상단에 있는 그래픽 아이콘을 누르고 Adventure Guide 라이브러리를 선택합니다. 흰색 텐트 아이콘을 눌러 레이아웃에 추가합니다. 핸들을 드래그하여 크기를 조정한 다음 레이아웃의 원하는 위치로 드래그합니다. 다른 아이콘들도 추가합니다.
화면 상단의 텍스트 아이콘을 누르고 표제를 눌러 자리 표시자 텍스트를 추가합니다. 메뉴 바깥쪽을 누르고 표제를 상단 내비게이션 막대로 가져와 색상을 변경합니다. 화면 하단의 텍스트 아이콘을 누르고 글꼴, 크기, 정렬 및 간격과 같은 속성을 조정합니다.
조정을 완료하면 데스크탑에 설치된 Photoshop에서 계속 작업할 수 있습니다. 화면 상단에 있는 보내기 아이콘을 눌러 Photoshop CC로 보내기를 선택합니다.
앱 또는 웹 사이트에 맞는 화면 만들기
Comp 레이아웃을 템플릿으로 사용하여 모바일 앱 또는 웹 사이트에 맞는 화면을 디자인할 수 있습니다. Photoshop이 열려 있으면 구성 요소는 편집 가능한 Photoshop 문서로 열립니다.
Photoshop CC 2015에서 소개된 Photoshop 대지를 사용하면 Photoshop을 통해 단일 문서에서 다양한 크기의 여러 디자인을 만들어 활용할 수 있습니다.
구성 요소를 완성한 다음 레이어 팔레트에서 모든 레이어를 선택합니다. 레이어 패널 옵션에서 레이어에서 대지를 선택합니다. 대지의 이름을 Biking으로 지정합니다.
대지를 사용하여 앱 화면 초안 만들기
레이어 패널 옵션에서 대지 복제를 선택하여 대지를 복제하고 이름을 Camping으로 지정합니다. 복제한 대지를 드래그하여 캔버스에 놓습니다. 복제한 대지를 편집하여 앱에서 Camping 화면에 맞는 새로운 대지를 만듭니다. 이 프로세스를 반복하여 엡의 각 화면에 맞는 다른 상태를 보여주는 대지를 만듭니다.
팁: 대지를 사용하면 화면 간에 콘텐츠를 복제 및 재사용할 수 있고 앱을 통한 사용자 흐름을 검토할 수 있습니다. 이 튜토리얼의 완성된 대지를 확인하려면 PSD 파일을 다운로드하십시오.
모바일 디바이스에서 앱 미리 보기
iPhone 또는 iPad에서 Photoshop과 함께 사용 가능한 앱인 Adobe Preview CC를 사용하여 모바일 앱 또는 웹 사이트 디자인을 실시간으로 미리 볼 수 있습니다. 모바일 디바이스에서 Preview CC를 실행한 다음 USB 또는 Wi-Fi를 사용하여 디바이스를 연결합니다. 장치 미리 보기 아이콘을 클릭하여 패널을 열고 디바이스가 연결될 때까지 기다립니다.
Preview CC는 각 디바이스 크기에 맞는 대지를 감지하고 표시합니다. 라이브 미리 보기를 통해 Photoshop에서 변경한 앱 디자인은 디바이스에서 다이내믹하게 나타납니다. Preview CC에서 손가락으로 밀어 넘겨 여러 대지 간을 전환합니다.
제작용 디자인 내보내기
앱 디자인이 마음에 들면 파일 > 내보내기 > 내보내기 형식...을 선택하고 PNG를 선택하여 개발자에게 전달할 모든 대지를 내보냅니다.
팁: 단일 대지는 PNG, JPEG, SVG 또는 GIF 포맷으로 손쉽게 내보낼 수 있습니다. 레이어 패널에서 대지를 선택합니다. 다른 내보내기 설정을 사용하려면 마우스 오른쪽 버튼을 클릭하고 PNG로 빠른 내보내기를 선택하거나 내보내기 형식...을 선택합니다.
