Adobe Project Rome을 사용하여 웹 사이트를 구축하는 방법
Adobe는 최근 일종의 올인원 컨텐츠 출판 플랫폼 인 Rome이라는 프로젝트를 시작했습니다. 이 혁신적인 응용 프로그램을 사용하여 웹 사이트를 구축하고 프로젝트를 인쇄하며 대화 형 PDF 등을 만들 수 있습니다.
오늘 저는 로마에 대한 초급 기초 초보자 소개를 제공하여 그것이 무엇인지, 어떻게 사용하는지, 그것이 당신에게 적합한 지 여부를 알 수 있습니다.
로마
Adobe의 말로는 Project Rome은 "거의 모든 사람을위한 간단하고 강력하며 올인원 컨텐츠 제작 및 출판"입니다. 이것이 조금 모호하다고 생각하면 옳습니다. 그러나 다시, 전체 프로젝트는 약간 수수께끼입니다. 로마는 Photoshop의 미래입니까? Dreamweaver 또는 InDesign과의 경쟁입니까?
그 대답은 실제로 "위의 어느 것도 아닙니다" 조금만 연주하면 Adobe가 Creative Suite와 다른 시장을 목표로 삼고 있음이 분명해집니다. CS는 엄청나게 값 비싼 강력하고 전문적인 응용 프로그램 집합으로 철저히 배우려면 몇 년 (수십 년)이 걸릴 수 있지만 로마는 누구나 거의 모든 사람이 풍부한 콘텐츠를 제작할 수있는 사용자 친화적 인 방법입니다.
시작하기 전에 로마 웹 사이트를 방문하여 데스크톱 응용 프로그램을 다운로드하거나 웹 응용 프로그램을 시작합니다 (데스크톱 버전을 사용하겠습니다).
비용은 얼마입니까?
로마는 현재 무료 미리보기로 제공됩니다. Adobe는 아직 가격 전략을 아직 결정하지 않았으며 진행하기 전에 사용자의 반응을 확인하고 싶어합니다. 지금 사본을 다운로드 할 수 있지만 언젠가는 사본을 비활성화하고 일회성 라이센스를 구매하거나 구독을 할 수 있다는 것을 알고 있습니다.
시작하기
응용 프로그램을 다운로드 한 후에 실행하면 바탕 화면에 세로 단추가 나타납니다.
여기에서 기본 템플릿 또는 사용자가 제출 한 멋진 템플릿 갤러리를 탐색 할 수 있지만 이미 많은 작업이 진행되어 있으므로 학습 목적으로 처음부터 시작하는 것이 좋습니다.
“Create New”버튼을 클릭하여 가능한 큰 문서 크기의 갤러리를 엽니 다. 여기에서 "화면 비우기"로 이동하여 "브라우저 크기"폴더에서 무언가를 선택하십시오. 960 × 550을 선택했습니다.
로마를 만나다 : 인터페이스
Rome 인터페이스를 처음 보면 매우 단순화 된 Photoshop 버전처럼 보입니다. 끝없이 펼쳐지는 팔레트 바다가 아니라 몇 개 밖에 없습니다. 실제로는 너무 적은 것처럼 보일 수 있습니다. 그 이유는 Adobe가 전체 엔칠 라다를 한 번에 제공하지 않고 볼 때 필요할 때만 볼 수있는 새로운 아이디어를 실험하고있는 것 같습니다.
위의 이미지는 Creative Suite에서 익숙한 화면과 화면이 얼마나 나빠 졌는지 보여줍니다. 간단한 프로젝트를 진행하면서 아래의 각 섹션을 자세히 살펴 보겠습니다.
시트
우리가 만들 사이트에는 여러 페이지가 있습니다. 로마는 이것을 "시트"라고하며 썸네일 미리보기와 함께 왼쪽 상단에 표시합니다.
가장 먼저 할 일은 "마스터 시트"를 만드는 것입니다. 이를 통해 모든 페이지에 나타날 몇 가지 기본 항목을 설정할 수 있습니다. 마스터 시트의 항목은 모든 시트에 수동으로 항목을 배치하지 않고 다른 시트로 자동 전달됩니다. 시트에 편집 할 수없는 요소가 자주 표시되므로 처음에는 혼동 될 수 있습니다. 항목이 해당 시트에 나타날 수 있지만 마스터 요소이므로 편집하기 전에 마스터 시트를 선택해야합니다.
마스터 시트를 만들려면 "보기"메뉴에서 "마스터 시트 표시"를 클릭하십시오. 그러면 시트 메뉴가 시트와 마스터 시트의 두 섹션으로 구분됩니다. 작은 플러스 버튼을 클릭하면 몇 장의 일반 시트를 추가 할 수 있습니다. 시트의 썸네일 옆에는 작은 로마 아이콘이 있으며 여기에는 인터페이스에 흩어져 있으며 상황에 맞는 숨겨진 메뉴가 있음을 나타냅니다.
이 작은 플라이 아웃 메뉴를 사용하여 시트 이름을 홈, 정보, 포트폴리오 및 연락처로 지정하십시오.
탐색 메뉴
우리는 이것을 앱에 대한 간단한 소개로 유지하므로 탐색 메뉴를 작성하여 많은 기본 기능을 과시 할 수 있습니다. 시작하려면 텍스트 도구를 잡고 상자를 그립니다. 그런 다음 "홈"을 입력하고 아래 표시된 메뉴를 사용하여 원하는 글꼴을 선택하십시오.
여기 메뉴가 실제로 작동하는 것을 볼 수 있습니다. 여기에는 많은 하위 메뉴가있는 수많은 메뉴 옵션이 있습니다. 당신이 얻는 것은 모든 혼란없이 많은 기능입니다. 확실히 익숙해지기까지 시간이 걸리지 만 시간이 많이 걸리더라도 그렇게 나쁘지는 않습니다. 글꼴 크기와 같은 다양한 속성을 조정하는 데 사용할 수있는 작은 슬라이더가 정말 좋습니다.
크기와 글꼴을 알아 낸 후에는 "링크"메뉴로 이동하여 링크를 "홈"시트로 설정하십시오.
그러면 밑줄이있는 링크 모양이 파란색으로 자동 변경됩니다. 우리는 이들 중 하나를 원하지 않기 때문에 수정해야합니다. 색상을 다시 검은 색으로 변경하는 것은 쉽지만 밑줄을 찾기가 더 어려웠습니다. 이 옵션은 아래“추가 문자 옵션”메뉴에 있습니다.
호버 효과
다음으로 커서로 커서를 가리키면 링크 모양을 변경하려고합니다. 이것은 직관적 인 과정이 아니며 알아내는 데 몇 분이 걸렸습니다.
텍스트 상자를 선택한 상태에서 "고급"메뉴의 "이벤트 설정"으로 이동하여 "표준 이벤트"를 활성화하십시오.
이제 주 메뉴에 "이벤트"옵션이 있어야합니다. 여기에서 "Mouse Enter"및 "Set Property"로 이동하십시오. 그런 다음 텍스트 객체를 선택하고 속성을 불투명도로 설정하십시오. 마지막으로 값을 50 %로 설정하십시오.
이것은 누군가가 그것을 가리킬 때 원본 불투명도의 50 %로 텍스트를 어둡게합니다. 단순히 색상을 설정하고 싶지만 해당 옵션이 이벤트 메뉴에 나타나지 않는 것 같습니다.
이제 우리가 겪는 문제는 마우스 입력에서 텍스트의 색상이 변경되지만 영구적으로 유지된다는 것입니다. 이를 해결하려면 마우스 종료에 불투명도를 다시 100 %로 설정하는 다른 이벤트를 추가해야합니다. 아래 이미지를 참조하십시오.
홈 링크 복제
이제 첫 번째 링크를 원하는 방식으로 설정 했으므로 세 번 복사하여 붙여 넣기하여 정보, 포트폴리오 및 연락처 링크를 만듭니다. 각 텍스트를 선택한 다음 해당 시트를 가리 키도록 링크를 변경해야합니다.
또한 객체가 균등하게 배치되도록 객체를 세로로 분산해야합니다. 이렇게하려면 모든 텍스트 상자를 선택하고 정렬 메뉴로 이동하십시오.
작업 미리보기
탐색 메뉴가 제대로 작동하는지 확인하려면 화면 상단 근처에있는 재생 단추가있는 작은 모니터 단추를 클릭하십시오. 이를 통해 실제 사이트를 실시간으로 미리 볼 수 있습니다.
링크 위로 마우스를 가져가 작동하는지 확인하고 주위를 클릭하여 시트가 변경되는지 확인하십시오.
객체 팔레트
페이지에 몇 가지 요소가 있으므로 Objects 팔레트를 살펴 보겠습니다. 이것은 다른 앱에서 볼 때 사용하는 레이어 팔레트와 동일하며 본질적으로 페이지의 모든 요소에 대한 대화식 목록입니다.
Photoshop 레이어 팔레트보다 훨씬 간단합니다. 마스킹, 레이어 효과 등이 없습니다.
마스터 시트 마무리
모든 훌륭한 미니멀리스트 사이트에는 진부한 원형 로고가 있기 때문에 우리는 단순히 로고없이 로고를 유지할 수 없습니다. 하나를 빨리 조롱하면 모양 도구에 대한 느낌이 생깁니다. 이미지 품질 저하없이 모양의 크기를 완전히 조정할 수 있습니다. 로마는 벡터 및 래스터 객체 모두에 적합합니다.
이것으로 마스터 시트가 완성되었습니다. 이러한 요소는 추가 노력없이 모든 페이지에 나타납니다.
사이트 마무리 및 내보내기
앞에서 언급했듯이, 내비게이션을 통해 보여주고 싶은 대부분의 기능을 다룰 수있었습니다. 링크를 설정하고 배치 및 분산 된 객체를 만들고 호버 효과를 만들었습니다.
여기에서 당신은 스스로 놀고 다른 페이지를 마무리해야합니다. 이미지에 붙여 넣어 텍스트 단락으로 작업하고 그리드를 만들 수도 있습니다. 마스터 시트에 계속 추가하지 않도록 내용을 추가하기 전에 적절한 시트를 선택하십시오.
사이트를 완료하면 사이트를 내보내기위한 두 가지 기본 옵션이 있습니다. 첫 번째는 로마 사이트입니다. 그러면 Adobe ID를 사용하여 사이트를 Adobe 호스팅 서버에 업로드합니다 (지금은 무료). 그러나이 방법으로는 아무것도 할 수 없으므로 SWF로 내보내고 HTML 파일 작성 옵션을 선택하는 것이 좋습니다.
이것은 당신에게 코드 온스없이 당신이 직접 만든 라이브, 작동하는 웹 사이트를 제공합니다!
로마에 대한 나의 생각
이제 당신이 정말로 관심있는 부분이 생겼습니다. 실제 프로젝트에 로마를 사용할 수 있습니까? 이 질문에 대답하기 위해 장단점을 살펴 보겠습니다.
먼저 긍정적 인면을 보자. 로마는 혁신적인 WYSIWYG로 완벽하지는 않지만 아주 세련되고 강력합니다. 학습 곡선은 CS 앱보다 훨씬 작으며 해당 제품군에 협박하는 모든 사람에게 확실히 호소해야합니다. 또한 개발자가 아닌 개발자가 한 줄의 코드 없이도 실제로 작동하는 웹 사이트를 구축 할 수 있도록하는 환상적인 목표를 달성했습니다.
그러나 이러한 이점에도 불구하고 웹 프로젝트에 대한 전문적인 맥락에서 로마를 사용하는 것을 보지 못했습니다. 나를위한 가장 큰 장애물은 플래시에 너무 의존적이라는 것입니다. 나는 플래시 강타를 시작하지 않을 것이지만, 이것은 당신이 그것을 좋아하든 싫어하든간에 기술을 단순히 비실용적으로 사용하는 것입니다. 방금 구축 한 사이트에는 몇 개의 링크와 이미지 만 표시되었습니다. 결과 파일이 순수한 HTML과 CSS 이외의 이유 일 필요는 없습니다. Adobe가 Flash 지원으로 구축하고 싶어한다는 것을 이해할 수 있지만 기본 웹 출력 옵션이없는 경우이 도구를 사용하여 웹 사이트를 구축 할 수 있다고 주장하지는 않습니다.
이 기사는 로마를 웹 관점에서만 보았습니다. 인쇄물 및 대화식 PDF를 개발하는 데 여전히 유용 할 수 있습니다. 실제로, 그것은 실제로 후자를위한 정말 멋진 도구입니다.
결론
요약하자면, 웹 개발에 익숙하지 않고 다른 사람을 고용하거나 15 권의 책을 읽지 않고 빠른 사이트를 직접 만들어야하는 경우 로마를 확인하십시오. 당신의 전문 지식 수준에 관계없이 쉽게 픽업하고 실행할 수 있습니다.
그러나 실제로 전문적인 수준의 웹 사이트를 만드는 강력하고 사용자 친화적 인 WYSIWYG 시장에 있다면 Flux 3에 대한 자습서를 확인하십시오. CSS를 이해하면 Flux는 킬러 응용 프로그램이며 가치있는 경쟁자는 없습니다.
아래에 의견을 남기고 Project Rome에 대한 의견을 알려주십시오. 이 실험에서 Adobe는 무엇을 올바르게 했습니까? 그들은 무엇을 잘못 했습니까? 우리는 당신의 의견을 듣고 싶습니다!
