Adobe Spark를 이용한 무료 원 페이지(One Page) 웹사이트 만들기

 

Adobe Spark는 사용자가 간단한 온라인 인터페이스를 사용하여 템플릿 기반 소셜 미디어 그래픽(Adobe Spark Graphic), 웹 스토리(Adobe Spark Web Page) 및 애니메이션 비디오(Adobe Spark Video)를 만들 수 있는 Adobe의 새로운 앱입니다.

 

Adobe Spark Page는 디자인이 전혀 없는 한 페이지 웹 사이트(레쥬메, 포트폴리오, 블로그 게시물, 프레젠테이션 등)를 쉽게 만들 수 있는 단일 페이지 웹 사이트 빌더입니다. 이것은 이미지, 비디오, 텍스트 및 링크를 포함하는 간단한 웹 페이지 역할을 합니다.

 

Adobe Spark Page 모듈은 사용자가 온라인 잡지 스타일 웹 페이지를 만들 수 있도록 설계되었습니다. 사용 가능한 템플릿 및 레이아웃 옵션은 매우 현대적이며 시각적 내용에 중점을 둔 우아하고 매력적인 방식으로 작품을 표시하도록 설계되었습니다.

 

Adobe Spark Page는 Adobe Stock, Creative Cloud 또는 Lightroom(모든 Adobe 제품)에서 사진을 가져오는 옵션을 제공합니다. 이는 모든 앱을 연결하려는 Adobe 사용자에게 확실히 좋은 점이라고 할 수 있습니다. Dropbox, Google Photo 또는 Google Drive에 연결하는 옵션도 있으므로 Adobe 사용자를 넘어 혜택을 누릴 수 있습니다.

 

Adobe Spark Page의 가장 좋은 기능 중 하나는 얼마나 빨리 시작하고 그것을 실행할 수 있다는것입니다.

 

플랫폼에 가입하는 것은 간단합니다. Adobe Spark는 무료이지만 Adobe ID, Google 또는 Facebook 로그인이 필요합니다. 어도비 계정을 만들거나 기존 Adobe ID를 사용하여 로그인 한 다음 만들려는 프로젝트 유형 (사진, 비디오 또는 웹 페이지)을 선택하면 됩니다. Adobe Spark에서 제시하는 사용할 템플릿이 눈에 띄지 않으면 처음부터 자신의 디자인을 만들 수도 있습니다.

 

 

 

Adobe Spark Web Page 만드는 방법

 

시작하기 

우측 상단에 'Stark from scratch'를 눌러보면 Graphic, Web Page, Video 세 개의 카테고리가 보입니다. 저는 이번 포스팅에서 웹페이지를 만들 것이기 때문에 Web Page를 클릭하여 새 페이지를 만듭니다.

 

제목

페이지에 타이틀과 서브타이틀을 추가하라는 화면이 나타납니다. 여기에서 페이지를 리드할 수 있는 백그라운 이미지도 넣어줍니다.

 

사진

제목을 위한 백그라운드 이미지를 추가하려면 아래 'Photo' 아이콘을 클릭하면 오른쪽 사이드바에 다양한 사진을 선택할 수 있는 옵션이 나타납니다.

 

컴퓨터에서 사진을 업로드하거나 Spark의 이미지 검색을 사용하여 무료 이미지를 찾거나, Dropbox 또는 Google Photos에서 사진을 추가할 수 있습니다. 그 외에도 Adobe Stock, Creative Cloud, Lightroom에서 원하는 옵션을 선택하면 됩니다. 

 

저는 무료로 제공하는 라이브러리에서 'sushi'라는 검색어를 통해서 원하는 이미지를 선택했습니다.

 

타이틀, 서브 타이틀 및 백그라운드 이미지가 설정되면 가운데 아래있는 플러스(+) 버튼을 아래로 스크롤합니다.

 

플러스(+) 버튼을 클릭하여 사진, 텍스트, 링크 버튼, 비디오, 사진 격자 또는 글라이드쇼와 같이 추가할 내용의 버튼을 클릭하여 콘텐츠를 추가합니다. Spark 페이지의 다른 부분으로 콘텐츠를 이동할 수는 없지만 플러스(+) 버튼을 클릭하여 추가하려는 새 콘텐츠를 추가할 수 있습니다.

 

텍스트

기본 서식 기능은 서식 도구 모음에서 사용할 수 있습니다. 일부 서식 기능(굵게, 기울임 꼴, 하이퍼 링크)을 사용하여 선택한 텍스트의 서식을 지정할 수 있습니다. 다른 서식 기능 (헤더, 블록 따옴표, 목록 및 정렬)은 해당 섹션의 모든 텍스트 서식을 지정합니다. Enter 키는 새로운 텍스트 섹션 (단락)을 추가합니다.

 

링크 버튼

텍스트에 하이퍼 링크를 추가할 수 있지만, 하이퍼 링크 버튼을 추가할 수도 있습니다.

 

Photo grid(사진 격자)

그리드에 배치 될 여러 사진을 추가합니다. Spark는 레이아웃의 서식을 자동으로 지정하지만 각 사진의 컨트롤을 사용하여 서식을 변경할 수 있습니다.

 

저는 무료 이미지 라이브러리에서 'sushi'라는 검색어를 통해서 선택한 이미지들로 사진 콜라주를 만들어 보겠습니다.

 

사진을 선택할 때마다 멋진 그리드 레이아웃으로 자동 정렬됩니다. 이미지 순서를 재 정렬하거나 이미지를 전체 페이지로 만들거나 그리드에서 이미지를 추가 및 삭제하여 그리드를 편집할 수 있습니다.

 

달성할 수 있는 특정 격자 레이아웃은 선택한 개별 사진의 종횡비에 따라 다소 제한적이지만, 사용자 정의 Photoshop 레이아웃을 만들거나 전용 사진 콜라주를 사용하는 것보다 훨씬 적은 작업으로 멋진 사진 콜라주를 표현하는 가장 쉬운 방법입니다.

 

Glideshow(글라이드쇼)

이번에는 Glideshow(글라이드쇼)를 추가해 보겠습니다. 사진을 추가하는 과정은 Photo grid(사진 격자)와 비슷합니다.

 

Glideshow(글라이드쇼)를 사용하면 그림 위에 여러 기능을 추가할 수 있습니다. 글라이드쇼의 배경 이미지는 서로 희미해지면서 글라이드쇼를 스크롤할 때 다른 내용이 스크롤됩니다.

 

배경 사진을 선택하고 저장을 클릭한 다음 플러스 버튼을 사용하여 텍스트를 추가하고, 따옴표를 붙이고, 더 많은 이미지를 위에 추가합니다. 글라이드쇼에서 배경 사진 중 하나를 클릭하여 해당 사진의 초점을 선택하거나 글라이더쇼에서 배경 사진을 편집할 수도 있습니다.

 

무료 이미지 라이브러리에서 사진을 선택하거나 또는 내 컴퓨터에서 업로드 한 이미지들을 추가 또는 삭제하거나, 글라이드쇼에 표시되는 순서를 변경할 수 있습니다.

 

글라이드쇼 프레젠테이션은 사진을 생생하게 표현하는 현대적인 애니메이션 잡지 스타일의 슬라이드 쇼로 설계되었습니다. 텍스트 캡션을 추가할 수 있으며 정말 멋진 기능 중 하나는 줌 포인트를 추가하여 이미지의 특정 부분에 방문자의 관심을 집중시키는 기능입니다. 이 기능은 놀라울 정도로 훌륭하다고 생각됩니다.

 

사진을 선정하고 난 다음에는 각 사진에 알맞은 텍스트를 넣어줍니다. 사진을 클릭하면 텍스트를 편집할 수 있는 도구가 나타납니다. 텍스트를 원하는 형태로 편집할 수 있습니다.

 

완성된 글라이드쇼가 매끄럽게 보이는 모습에 깊은 인상을 받을 수 있습니다. 또한 방문자의 관심을 끌 수 있는 방식으로 브랜드의 이미지를 제시하는 좋은 방법입니다.

 

테마 선택

페이지가 완성되면 원하는 경우 테마를 변경할 수 있습니다. 오른쪽 상단에 테마를 클릭하고 원하는 섬네일 테마를 선택하면 텍스트와 색상이 변경됩니다.

 

저는 현재 사용하고 있는 페이지에서 내가 추구하는 컨셉과 잘 맞다고 생각하기 때문에 기본 테마를 고수하겠습니다.

 

비디오

이번에는 비디오를 넣어보겠습니다. 비디오 링크를 붙여 넣고 저장을 클릭하여 YouTube, Vimeo 또는 Spark 비디오의 비디오를 포함시킬 수 있습니다.

 

저는 이전에 '어도비 스파크 비디오(Adobe Spark Video)'에 대해서 포스팅한 적이 있습니다. 이 포스팅은 SNS 마케팅을 위한 홍보 영상을 어도비 스파크를 통해 만들어 보았습니다. 링크를 클릭해 보면 내용을 참고할 수 있습니다. 저는 이 비디오를 가져와서 여기에 넣겠습니다.

 

스플리트 레이아웃(Split layout)

이제 'Split layout' 섹션을 이용해서 웹 페이지를 마무리해 보겠습니다.

 

'Split layout' 섹션은 두 개의 레이어로 되어있습니다. 한쪽은 이미지, 다른 한쪽은 텍스트를 넣을 수 있습니다. 가운데 스위치 버튼을 통해서 위치를 바꿀 수도 있습니다.

 

저는 오른쪽에 이미지를 넣고 왼쪽에는 텍스트를 넣어 주었습니다.

 

미리 보기

화면 상단의 미리보기를 클릭하여 게시된 페이지가 어떻게 보이는지 확인할 수 있습니다.

 

 

공유

공유할 준비가 되면 화면 상단의 공유를 클릭하면 됩니다. 잠재 고객과 페이지를 공유할 수 있는 몇 가지 옵션이 제공됩니다. 링크를 복사하여 포함하거나, 엠비디드 옵션을 사용하여 다른 웹 사이트에 페이지를 포함시킬 수 있습니다.

 

마지막으로 Facebook, Twitter, Email 또는 직접 링크에서 내가 만든 웹 페이지를 공유할 수 있습니다. 하지만 어도비 스파크 브랜딩이 포함되어 나타납니다. 무료로 사용하려면 피할 수 없습니다.

 

지금까지 어도비 스파크 웹 페이지(Adobe Spark Web Page)를 통해서 한 페이지짜리 웹 사이트를 간단하게 만들어보았습니다. 놀랍지 않나요? 이렇게 짧은 시간에 한 페이지짜리 웹 페이지가 완성되었습니다.

 

자! 이제 완성된 웹 페이지를 한번 볼까요?

K-POP SUSHI WEB PAGE 바로가기 ▶

 

 

전반적으로 Adobe Spark Web Page로 만들 수 있는 웹사이트 페이지의 디자인이 마음에 듭니다. 제작하기 쉬워 전통적인 블로그나 웹 페이지를 사용하는 대신 시각적인 스토리를 표현하는데 훨씬 효과적이고 역동적인 방법이라고 생각합니다. 결론적으로 Adobe Spark Page는 원 페이지 웹사이트 및 소셜 미디어 콘텐츠를 제작할 수 있는 강력한 도구입니다.

 

어도비 스파크(Adobe Spark) 바로가기 ▶