단 5분 만에 트위터 웹사이트를 쉽게 만드는 초간단 가이드
당겨주세요!
목차
- 트위터 웹사이트가 왜 필요할까요?
- 트위터 웹사이트 제작의 핵심: ‘트위터 임베드’란?
- 트위터 웹사이트 제작 1단계: 트위터 임베드 코드 생성하기
- 트위터 웹사이트 제작 2단계: 웹사이트에 코드 삽입하기
- 다양한 활용 방안: 나만의 포트폴리오 사이트 만들기
- 마치며: 트위터 웹사이트로 새로운 가능성을 열어보세요
트위터 웹사이트가 왜 필요할까요?
최근 몇 년 사이 트위터는 단순한 소셜 미디어를 넘어, 개인의 브랜드와 전문성을 알리는 강력한 도구로 자리 잡았습니다. 특히 많은 프리랜서, 작가, 개발자, 아티스트들이 트위터를 통해 자신의 작업물이나 생각을 공유하고 팔로워들과 소통합니다. 하지만 트위터의 휘발성 때문에 중요한 트윗이나 작업물이 시간이 지나면 묻히는 경우가 많습니다. 이때 필요한 것이 바로 ‘트위터 웹사이트’입니다. 트위터 웹사이트는 자신의 트윗 타임라인을 그대로 가져와 개인 웹사이트 형태로 보여주는 것을 의미합니다. 이를 통해 방문자는 내 트윗을 한눈에 볼 수 있으며, 내 트위터 계정을 방문하지 않고도 내가 어떤 활동을 하는지 쉽게 파악할 수 있습니다. 이는 개인의 포트폴리오, 이력서, 혹은 단순히 나를 소개하는 페이지로 활용하기에 아주 효과적입니다. 또한, 여러 소셜 미디어 계정을 관리할 필요 없이 트위터 하나로 모든 것을 통합하여 관리할 수 있다는 장점도 있습니다.
트위터 웹사이트 제작의 핵심: ‘트위터 임베드’란?
트위터 웹사이트를 만드는 가장 쉬운 방법의 핵심은 트위터 임베드(Twitter Embed) 기능입니다. ‘임베드(Embed)’는 ‘끼워 넣다, 내장하다’라는 의미로, 트위터에서 제공하는 특정 코드를 복사하여 다른 웹페이지에 붙여넣는 것을 말합니다. 이 코드를 사용하면 특정 트윗이나 트위터 계정의 타임라인 전체를 내 웹사이트에 그대로 표시할 수 있습니다. 예를 들어, 내가 쓴 한 편의 트윗을 블로그 게시물 중간에 삽입하여 내용의 신뢰성을 높이거나, 내 웹사이트 메인 페이지에 트위터 타임라인을 실시간으로 연동하여 방문자들이 내 최신 소식을 바로 확인할 수 있게 만드는 것이 가능합니다. 이 기능은 트위터가 공식적으로 지원하기 때문에 별도의 복잡한 프로그래밍 지식 없이도 누구나 쉽게 이용할 수 있습니다. 임베드 코드는 트위터 공식 ‘퍼블리시(Publish)’ 웹사이트를 통해 간단하게 생성할 수 있으며, 이 코드는 자바스크립트(JavaScript)와 HTML의 조합으로 이루어져 있습니다. 이 코드는 트위터 서버와 실시간으로 연동되어 내 트윗이 업데이트될 때마다 웹사이트에도 자동으로 반영되므로, 한 번 설정해두면 별도로 관리할 필요가 없습니다.
트위터 웹사이트 제작 1단계: 트위터 임베드 코드 생성하기
자, 이제 실제로 트위터 웹사이트를 만들어볼까요? 가장 먼저 해야 할 일은 내 트위터 타임라인을 웹사이트에 표시할 수 있는 임베드 코드를 생성하는 것입니다. 이 과정은 매우 간단합니다.
- 트위터 퍼블리시 웹사이트 접속: 가장 먼저 트위터 공식 ‘퍼블리시’ 웹사이트(https://publish.twitter.com/)에에) 접속합니다. 이 웹사이트는 트위터 콘텐츠를 외부 웹사이트에 손쉽게 삽입할 수 있도록 돕는 도구입니다.
- 원하는 트위터 프로필 URL 입력: 웹사이트 중앙에 있는 입력창에 내가 웹사이트로 만들고 싶은 트위터 계정의 URL을 입력합니다. 예를 들어,
https://twitter.com/사용자아이디와 같은 형식입니다. - 표시 방식 선택: URL을 입력하고 ‘Enter’를 누르면, 여러 가지 표시 옵션이 나타납니다. 우리는 내 트위터 계정 전체를 보여주는 웹사이트를 만들 것이므로 ‘Embedded Timeline(임베디드 타임라인)’을 선택합니다.
- 코드 복사: ‘임베디드 타임라인’을 선택하면, 미리보기와 함께 ‘Copy Code(코드 복사)’ 버튼이 나타납니다. 이 버튼을 클릭하면 내 트위터 타임라인을 웹사이트에 표시할 수 있는 HTML 코드가 클립보드에 복사됩니다. 이 코드는
<a class="twitter-timeline" href="https://twitter.com/사용자아이디">Tweets by 사용자아이디</a>와 같은 HTML 태그와 그 아래에<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>와 같은 스크립트 태그로 구성되어 있습니다. 이 두 코드가 함께 작동해야 정상적으로 트위터 타임라인이 표시됩니다.
트위터 웹사이트 제작 2단계: 웹사이트에 코드 삽입하기
이제 복사한 임베드 코드를 내 웹사이트에 붙여넣는 단계입니다. 이 과정은 어떤 웹사이트 빌더나 플랫폼을 사용하느냐에 따라 약간의 차이가 있지만, 기본적인 원리는 동일합니다.
- HTML 파일에 직접 삽입: 만약 HTML, CSS, JavaScript 등으로 직접 웹사이트를 만들었다면,
index.html파일의<body>태그 내 원하는 위치에 복사한 코드를 그대로 붙여넣습니다. 이 방법은 가장 기본적인 방식이며, 코드를 직접 제어할 수 있어 원하는 대로 디자인을 수정하기 용이합니다. - 워드프레스(WordPress) 등 CMS 사용: 워드프레스, Wix, Squarespace와 같은 콘텐츠 관리 시스템(CMS)을 사용하고 있다면, ‘HTML 블록’ 또는 ‘코드 삽입’ 기능을 활용하면 됩니다. 페이지 편집기에서 ‘새 블록 추가’를 선택하고 ‘HTML’ 또는 ‘코드’를 검색하여 해당 블록을 추가한 뒤, 복사한 코드를 붙여넣습니다.
- 노션(Notion) 등 생산성 도구 활용: 노션처럼 임베드 기능을 강력하게 지원하는 도구에서는
/embed명령어를 사용하거나, 링크를 직접 붙여넣어 자동으로 트위터 위젯을 생성할 수 있습니다. 이 경우, 별도로 복잡한 코드를 복사할 필요 없이 트위터 프로필 URL만 붙여넣으면 됩니다.
코드를 삽입한 후, 웹사이트를 새로고침하거나 게시하면 내 웹사이트에 트위터 타임라인이 나타나는 것을 확인할 수 있습니다. 처음에는 빈 공간으로 보일 수 있지만, 잠시 후 트위터 위젯이 로딩되면서 내 트윗들이 순서대로 표시됩니다.
다양한 활용 방안: 나만의 포트폴리오 사이트 만들기
이렇게 만든 트위터 웹사이트는 단순히 트윗을 보여주는 것을 넘어 다양한 방식으로 활용될 수 있습니다.
- 개인 포트폴리오: 트위터는 아이디어, 작업 과정, 작은 성과 등을 꾸준히 기록하기 좋은 플랫폼입니다. 웹사이트에 트위터 타임라인을 연동하면 나의 활동과 작업물들을 실시간으로 보여주는 살아있는 포트폴리오가 됩니다.
- 블로그 대체: 복잡한 블로그 구축이 부담스럽다면, 트위터에 긴 글을 작성하고 이를 웹사이트에 그대로 보여주는 방식으로 블로그를 대체할 수 있습니다.
- 이벤트 및 공지 페이지: 트위터로 진행하는 이벤트를 홍보하거나, 공지사항을 알리는 전용 페이지로 활용할 수 있습니다.
- 뉴스레터 랜딩 페이지: 뉴스레터를 발행하는 사람이라면, 웹사이트에 트위터 타임라인을 삽입하여 최신 소식을 공유하고, 뉴스레터 구독을 유도하는 랜딩 페이지로 활용할 수 있습니다.
마치며: 트위터 웹사이트로 새로운 가능성을 열어보세요
트위터 웹사이트는 복잡한 코딩이나 웹 개발 지식이 없어도 누구나 쉽게 만들 수 있는 강력한 도구입니다. 단 몇 분의 투자만으로 내 트위터 활동을 세상에 더욱 효과적으로 알릴 수 있는 나만의 공간을 만들 수 있습니다. 오늘 알려드린 ‘트위터 임베드’ 기능을 활용하여 여러분의 트위터 계정을 단순한 소셜 미디어를 넘어, 개인 브랜딩과 전문성을 강화하는 새로운 플랫폼으로 발전시켜보세요. 이를 통해 더 많은 사람들에게 당신의 가치를 전달하고, 새로운 기회를 만들어낼 수 있을 것입니다.