오늘 소개해드릴 사이트는 콘텐츠 제작플랫폼 XELF 입니다. 이 사이트는 평범한 우리네 콘텐츠를 움직이는 카드뉴스로 제작해 보다 나은 효과를 기대할 수 있는데요. 


    복잡한 프로그램 설치 없이도, HTML에 대한 전문적인 지식 없이도 손쉽게 콘텐츠를 만들 수 있고요. 드래그앤 드롭 방식으로 간편하게 문서, 발표자료, 콘텐츠를 저작할 수 있으며, 최근 유행하는 소셜 콘텐츠도 뚝딱 만들 수 있습니다.



    움직이는 카드뉴스 제작사이트, XELF 써보니..


    세부적으로 보면 이 사이트는 HTML5를 기반으로 하며 설치가 필요 없는 클라우드 어플리케이션인데요. 다양한 오브젝트를 드래그앤 드롭으로 쉽게 배치하고 제작할 수 있습니다. 


    거기다 저작과 동시에 클라우드에 저장이 되며, 클릭 한번만으로 이메일, SNS, 모바일 등으로 공유할 수 있습니다. 그리고 스마트폰, 태블릿, PC 등의 플랫폼을 가리지 않으며, 미디어를 삽입해 재미있는 애니메이션으로 콘텐츠에 활기를 더할 수 있고요.



    움직이는 카드뉴스 제작사이트, XELF 써보니..


    XELF 사이트를 사용하기 위해서는 먼저 회원가입 및 로그인을 해줘야 합니다. 다행히도 이메일 주소와 특수문자, 숫자, 영문 등으로 구성된 비밀번호를 입력하고 약관에 동의만 하면 되는 간단한 구조인데요. 


    모든 정보를 입력하고 하단의 ‘회원가입하기’ 버튼을 누르면 앞서 기입한 이메일로 인증메일이 옵니다. 메일 본문에서 ‘가입인증’ 버튼만 누르면 무료 회원으로 가입이 완료되는데요.


    참고로 무료회원은 총 10개의 프로젝트, 프로젝트당 20페이지를 사용할 수 있으며, 제공용량은 100 Mb에 제한됩니다. 해상도 역시 가로/세로 최대 1280 픽셀인데요. 프로젝트를 제작하기에는 충분한 용량이라 제한이 있어도 크게 문제되는 부분은 없을 것 같습니다.



    움직이는 카드뉴스 제작사이트, XELF 써보니..


    이제 본격적으로 카드 뉴스 콘텐츠를 만들어보고자 합니다. 먼저 XELF 사이트 대메뉴 중 ‘시작하기’ 메뉴 버튼을 누릅니다. 이윽고 프로젝트 이름과 카테고리, 해상도 설정, 프로젝트 프리셋 등을 선택하고요. 


    해쉬태그와 프로젝트 설명을 적고, 저작자 및 출처, 공개 및 사용 범위를 선택합니다. 이제 플레이어 스킨을 선택한 후, 그리드와 배경 색상을 원하는 디자인으로 선택하면 본격적인 생성 과정을 시작하는데요.



    움직이는 카드뉴스 제작사이트, XELF 써보니..


    XELF에서는 이미지, 텍스트, 도형 등의 다양한 오브젝트를 추가할 수 있는데요. 특히 PC에 있는 사진, 이미지 파일을 업로드하고 이를 캔버스로 불러와 원하는 위치에 삽입할 수 있습니다. 


    이미지 그리고 텍스트, 도형 등의 오브젝트를 하나의 캔버스, 한페이지에 삽입할 수 있고요. 개인 PC에 있는 사진과 이미지 외에도 웹사이트에서 기본 제공하는 400가지의 이미지를 사용할 수 있습니다.



    움직이는 카드뉴스 제작사이트, XELF 써보니..


    그리고 웹사이트에서 제공하는 솔루션 답지 않게 무겁다는 느낌이 들지 않았고요. 거기다 나눔/도현/연성/주아 등의 한글 폰트를 무료로 사용할 수 있어 너무 좋았습니다.


    텍스트를 입력하고 폰트를 바꿀 때에도 딜레이가 거의 없었고요. 폰트 크기, 색상 등을 변경하는 셀렉트박스도 포토샵이나 오피스와 비슷한 UI라 따로 학습을 할 필요가 없어 좋았습니다. 한글이 아니라 영문이라는 게 조금 아쉬웠는데요.



    움직이는 카드뉴스 제작사이트, XELF 써보니..


    본문에 도형을 삽입하고 이를 클릭 후 상단의 ‘회전’ 모양 아이콘을 누르면 방향을 입맛대로 조절할 수 있습니다. 그리고 (마치 포토샵처럼) 다양한 도형의 색상을 변경할 수도 있고요. 


    웹에서 혹은 이미지나 동영상에서 제법 마음에 드는 색상의 코드를 추출해 XELF의 색상 조정시 해당 코드를 붙여넣기해 적용할 수 있는데요. 거기다 투명도까지 조절이 가능해 제법 근사한 효과를 낼 수도 있습니다.



    움직이는 카드뉴스 제작사이트, XELF 써보니..


    그리고 XELF (셀프)에서는 오브젝트에 다양한 액션을 지정할 수 있는 인터랙션 기능을 지원하는데요. 사진이나 이미지, 도형, 텍스트를 클릭하고, 우측 상단에서 ‘Action’ 탭을 클릭 후 인터랙션을 추가해주면 됩니다.


    해당 기능에서 지원하는 인터랙션은 꽤 다양한데요. 클릭 혹은 마우스 오버시 특정 페이지나 URL로 이동하거나 이전화면으로 넘어갈 수도 있습니다. 또한 오브젝트를 움직이거나 투명도를 조절하고, 컬러를 변경하거나, 회전 시키고, 사이즈도 변경해줄 수 있는데요.



    움직이는 카드뉴스 제작사이트, XELF 써보니..



    위 이미지는 XELF를 통해 제작된 카드 뉴스에서 특정 오브젝트 클릭시 제 블로그 첫 화면으로 이동하는 인터랙션 기능을 움직이는 GIF로 담았습니다. 


    인터랙션 기능을 적용할 오브젝트를 사진, 별모양 도형, CLICK라고 쓴 텍스트에 적용해봤는데요. 이 세개의 오브젝트 중 하나라도 클릭시 바로 제 블로그 첫 화면으로 이동하게끔 구현하였습니다. 별다른 프로그래밍 언어나 프로그램을 설치해 기능을 사용할 필요 없이 아주 간단하게 말이죠.



    움직이는 카드뉴스 제작사이트, XELF 써보니..


    이번에는 이미지를 원하는 포지션으로 움직이는 인터랙션 기능에 도전해봤는데요. 앞서 URL 이동 효과처럼 ‘ACTION’ 탭에서 ‘move’ 액션을 추가하고 Element를 미리 캔버스에 삽입한 이미지로 선택합니다. 


    그리고 Trigger를 ‘mouse in’으로 설정하고, delay와 duration 시간을 입력한 후 position X축, Y축 값을 입력 후 하단의 ‘Apply’ 버튼을 누르니 바로 해당 인터랙션이 카드 뉴스에 적용되었습니다.



    움직이는 카드뉴스 제작사이트, XELF 써보니..


    위 이미지 역시 XELF를 통해 제작된 카드 뉴스의 오브젝트 위에 마우스 커서를 올리면 앞서 입력한 X축, Y축으로 이미지가 이동하는 인터랙션 기능을 움직이는 GIF로 담았습니다. 


    만약 콘텐츠를 특정 페이지 접속 시 페이지 속 오브젝트가 움직이는 걸 구현하고 싶다면, 캔버스 바탕화면에 인터랙션 기능을 추가만 하면 되는데요. 이를 통해 쉽고 빠르게 움직이는 카드뉴스를 제작할 수 있습니다.





    이렇게 XELF 사이트에 대한 제 경험담을 간단하게 정리해봤습니다. 따로 프로그램을 설치하지 않아도, 따로 이에 대한 학습을 하지 않았음에도 손쉽게 콘텐츠를 제작하고, 인터랙션 효과를 내는 콘텐츠를 제작할 수 있는 점이 꽤 인상적이었는데요.


    파워포인트나 포토샵 같은 툴을 이용해 카드 뉴스나 발표 자료를 만드는게 손에 익지 않은 분들에게는 꽤 괜찮은 선택지가 아닌가 생각됩니다. 거기다 사이트를 통해 콘텐츠를 제작하는 비용이 무료 멤버십만으로도 충분하고요.

    관련해서 XELF에 대한 자세한 정보와 사용 방법을 알고 싶고, 콘텐츠를 직접 만들고 싶은 분들은 아래 배너를 클릭해 ‘셀프’ 홈페이지에 접속해보길 바랍니다.











    Posted by Kibeom Song



티스토리 툴바