어도비 크리에이티브 클라우드 2015 톺아보기 ③ - Product & Technical

어도비 크리에이티브 클라우드 2015 톺아보기 ③ 어도비 크리에이티브 클라우드 2015 톺아보기 ③

월간PT 2015-12-04 14:45:52

HOME Product & Technical

언제 어디서든 원활한 크리에이티브 작업

어도비 콤프 CC, 포토샵 CC, 프리뷰 CC는 웹과 모바일 앱 디자인을 위한 원활하고 완벽한 작업 환경을 제공한다.

영감을 떠올린 즉시 콤프 CC로 레이아웃을 디자인하는 것부터 시작해, 목업을 포토샵 CC로 보내서 새로운 대지(Artboards, 이하 대지) 기능을 사용해 앱 또는 웹사이트 디자인의 각기 다양한 레이아웃을 제작할 수 있다. 포토샵 CC의 디바이스 프리뷰(Device Preview)와 새로운 프리뷰 iOS 앱을 사용하면 iOS 기기에서 모바일 앱 및 웹 디자인의 실시간 미리 보기가 가능하다. 이후, 보다 직관적으로 바뀐 포토샵의 내보내기 기능을 사용해 에셋을 내보내기 하면 된다.

제공 | 어도비 정리 | 월간PT 편집부(printingtrend@gmail.com)

2. 반응형 웹사이트 계획, 구축, 미리보기

어도비 콤프 CC, 포토샵 CC, 드림위버 CC(Dreamweaver CC)를 함께 사용하면 반응형 웹사이트를 디자인하고 구축하고 미리보기 할 수 있다. 반응형 웹사이트란, 데스크톱, 스마트폰, 태블릿 브라우저 각각에서 최적화되어 구동되는 웹사이트를 말한다. 콤프 CC에서 아이디어를 검토한 후, 각각의 기기를 위한 대지와 레이어 구성 요소를 만들기 위해 포토샵의 새로운 대지 기능을 사용해 대지를 만든다. 그 후, 크리에이티브 클라우드에 파일을 저장하면 드림위버에서 쉽게 구성요소를 추출할 수 있다. 드림위버는 웹사이트를 구축하고 미리보기하고 테스트할 수 있는 새로운 반응형 디자인 기능들을사용할 수 있는 애플리케이션이다.

콤프 CC 앱으로 레이아웃 아이디어를 검토

아이패드에 있는 콤프 CC 앱에 레이아웃에 대한 아이디어를 스케치한다. 레이아웃이 마음에 든다면, 포토샵으로 해당 레이아웃을 보내 작업을 이어나갈 수 있다.

포토샵 CC에서 대지와 레이어 요소 준비

콤프 CC에서 만든 레이아웃을 이용해, 포토샵 CC에서 다수의 스크린 레이아웃을 만들 수 있다. 반응형 웹 디자인을 위해, 포토샵의 새로운 대지 기능을 사용해 데스크톱, 태블릿, 모바일 브라우저에 적용될 각기 다른 사이즈의 레이아웃을 만들어낼 수 있다. 대지 기능은 각 브라우저에 필요한 요소들을 복사하고 조정하기 쉽도록 돕는다. 각 대지는 고유의 레이어 스택을 포함하기 때문에 보다 손쉽게 체계적인 디자인을 할 수 있다. 또한 각 대지에 사용되는 레이어 요소를 간단하게 제작할 수 있으며, 드림위버에서 웹사이트를 쉽게 구축할 수 있다.

드림위버 CC에서 웹사이트에 반응형 요소 추가

앞에서 만든 포토샵 파일을 드림위버에서 연다. 드림위버로 반응형 웹사이트를 이전보다 빠르고 쉽게 디자인, 개발할 수 있다. 내장된 Boot strap(Bootstrap, 예비 명령에 의해 프로그램을 로드하는 방법) 요소를 이용해 아무것도 없는 상태에서 처음부터 시작할 수도 있고, 보다 빠른 시작을 위해 템플릿을 사용할 수도 있다.

비주얼 미디어 쿼리 중단점은 다양한 스마트폰, 태블릿, 데스크톱 브라우저를 위한 여러 레이아웃을 쉽게 만들 수 있도록 돕는다. 사진 03 드림위버는 사이트를 구축하고 테스트할 수 있는 새로운 반응형 디자인 기능을 제공한다.

반응형 사이트 레이아웃 미리보기 및 테스트

드림위버 CC의 새로운 디바이스 프리뷰 기능을 통해, 실제 기기의 브라우저에서 웹사이트가 어떻게 보이는지 실시간으로 확인하고 테스트할 수 있다.

여러 iOS 및 안드로이드 기기, 윈도우 기기들을 동시에 미리보기할 수 있는 것이다. 또한, 스크러버(scrubber)를 라이브 뷰(Live View)에 드래그하면, 조작하기에 따라 사이트의 크기와 텍스트 공간 비중을 조정할 수 있다.

단계별 따라하기

드림위버 CC에서 반응형 웹 사이트 제작하기

반응형 웹 디자인 기능을 사용하여 처음부터 새로 만들거나 Bootstrap 시작 템플릿을 통해 다양한 화면 크기에 맞게 콘텐츠가 자연스럽게 렌더링 되도록 웹 사이트를 제작하는 방법을 살펴본다 반응형 웹 디자인은 하나의 디자인을 기반으로 데스크톱, 태블릿, 스마트폰 등 각기 다른 디바이스의 브라우저에 최적화된 웹 사이트를 구축하기 위한 방법이다.

PT 이슈

인터뷰

협회 및 유관단체