이 튜토리얼에서는 실제 데이터를 디자인 프로젝트에 자연스럽게 통합하는 방법을 알려드립니다. ProtoPie의 강력한 도구인 API 플러그인과 자체 호스팅 미디어의 기능을 살펴보며, 영화 데이터베이스 API를 사용해 영화 리뷰 사이트를 만드는 과정을 단계별로 안내합니다. 이때 The Movie Database(TMDB)를 영감의 모델로 삼습니다.
준비되셨나요? 이제 영화 같은 마법을 만들어 봅시다!
개요
The Movie Database API란 무엇인가요?
TMDB API 키 받기
API 플러그인 설정 방법
실시간 검색 제안 제공
API로 영화 메타데이터 가져오기
디자인에 실제 데이터를 사용하는 이유
비디오 스트리밍 및 TV UI 디자인 마스터클래스에 참여하세요
The Movie Database API란 무엇인가요?
TMDB (The Movie Database) API는 뛰어난 접근성과 포괄적인 범위로 돋보입니다. 특히 TMDB의 API는 무료이므로, 실제 데이터를 프로토타입에 통합하려는 디자이너와 개발자에게 매력적인 선택입니다. 출연진과 제작진 정보부터 리뷰와 평점까지 다양한 정보를 제공하는 TMDB는 사용자 친화적인 인터페이스와 방대한 문서를 갖추고 있어, 데이터 통합을 탐색하기에 이상적인 플랫폼입니다.
IMDB API도 유용한 데이터를 제공하고 업계에서 오랜 명성을 지니고 있지만, AWS Data Exchange를 통해서만 접근할 수 있으며 AWS 계정이 필요하고 유료 요금제에서 운영된다는 점을 알아두는 것이 중요합니다. 이번 탐색에서는 문서가 잘 정리되어 있고 무료로 이용할 수 있는 TMDB API를 활용하겠습니다.
TMDB API 키 받기
개인 API 키를 확보하려면 이 가이드에 제공된 단계별 안내를 따르면 됩니다. 완료되면 API 링크 페이지에서 액세스 자격 증명을 확인할 수 있습니다.
TMDB는 각각 장점이 있는 두 가지 인증 방법을 제공합니다:
쿼리 매개변수 사용: URL 안에
api_key라는 단일 쿼리 매개변수를 사용합니다. 예를 들면 다음과 같습니다:https://api.themoviedb.org/3/movie/11?api_key=API_KEY**헤더의 Bearer 토큰: **액세스 토큰을 Authorization 헤더에 Bearer 토큰으로 사용합니다. 아래는 API 플러그인 설정 예시입니다:
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }
방법의 선택은 구체적인 필요에 따라 달라집니다. 예를 들어 ProtoPie에서는 주로 신뢰할 수 있는 동료와 협업하는 경우 URL 방식을 사용하면 키를 프로토타입의 변수로 저장해 API 호출을 자동으로 전달할 수 있어 공유가 간편해집니다. 반대로 자격 증명을 노출하고 싶지 않은 외부 이해관계자에게는 두 번째 방식이 추가적인 보안을 제공합니다. 모든 사람이 API 플러그인 구성 안에서 고유한 자격 증명을 확보하고 설정하는 것이 중요합니다.
API 플러그인 설정 방법
프로토타입을 다운로드하여 기기에 저장하세요. 완료되면 ProtoPie Connect를 실행하고 이 프로젝트를 Connect 인터페이스로 드래그하세요.
다음은 API 구성입니다. 드롭다운 메뉴 오른쪽 상단의 플러그인 아이콘을 찾아 “API”라고 표시된 첫 번째 항목을 선택하세요. 이것이 TMDB API와 연동하는 관문입니다. ProtoPie의 API 플러그인 기능이 처음이라면, 먼저 다음 튜토리얼을 살펴보세요:
여기서 다루는 예제는 여러 API 엔드포인트를 포함합니다. Pro 요금제를 사용 중이라면 한 번에 하나의 API 플러그인만 사용할 수 있다는 점에 유의하세요. 하지만 Enterprise 요금제를 사용 중이라면 여러 플러그인을 자유롭게 생성할 수 있어 위의 데모 영상에서 보여준 것과 같은 포괄적인 기능을 경험할 수 있습니다.
실시간 검색 제안 제공
이 기능을 활성화하려면 Search > Movie 엔드포인트를 사용해야 합니다. 이 엔드포인트는 쿼리에 제공된 키워드를 기반으로 번역된 제목과 대체 제목을 포함한 영화 정보를 가져옵니다.
실시간 영화 검색 기능.
프로토타입에서 이 로직은 검색 상자의 변경 사항을 감지하는 Detect 트리거를 통해 동작합니다. 변경이 감지될 때마다 검색 상자의 내용을 쿼리 매개변수로 TMDB API에 빠르게 전달합니다. API는 즉시 응답하며, 이를 통해 가져온 데이터를 활용해 관련 정보를 실시간 검색 제안으로 보여줄 수 있습니다.
실시간 검색 제안을 위한 플러그인 설정 간단 가이드는 다음과 같습니다:
메서드: GET
헤더: "ACCESS_TOKEN"을 고유한 액세스 토큰으로 바꾸세요.
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie에서 오는 메시지: SEARCH
“Override URL with msg value” 체크박스를 선택했는지 확인하세요.
Pie로 보내는 메시지: SEARCH RESULT
설정이 끝나면 “Activate” 버튼을 클릭하세요. 이제 검색 상자에 입력해 보세요. 입력 내용에 기반한 실시간 제안을 확인할 수 있습니다.
API로 영화 메타데이터 가져오기
TMDB API는 출연진과 제작진 정보부터 리뷰와 평점까지, 영화와 관련된 다양한 정보를 제공합니다. 이 API를 통해 얻을 수 있는 풍부한 영화 관련 데이터에 대해 더 자세히 알고 싶다면 상세 문서 페이지를 방문해 보세요. 페이지 왼쪽의 “MOVIES” 카테고리에서 이 API가 제공하는 방대한 상세 정보 목록을 확인할 수 있습니다.
영화 메타데이터 요청 방법.
예제에서는 영화 상세 정보를 살펴보는 두 가지 경로가 있습니다. 홈 페이지에 표시된 아무 영화나 클릭하거나 검색 제안을 선택하면 됩니다. 영화의 상세 페이지에 도착하면 여러 섹션이 펼쳐집니다:
영화 제목, 포스터, 세부 정보가 포함된 헤더 섹션.
헤더 섹션: 이 섹션에서는 제목, 개봉일, 설명, 평점, 인상적인 영화 포스터를 포함한 영화의 기본 정보를 제공합니다.
영화의 주요 출연진 섹션.
**"최상위 출연진" 섹션: **여기에서는 영화에 참여한 주요 인물들의 크레딧, 각자가 연기한 캐릭터, 프로필 사진을 확인할 수 있습니다.
영화를 보여 주는 홍보 이미지
"미디어" 섹션: 이 영역은 영화와 관련된 시각적으로 매력적인 이미지를 엄선해 보여 주며, 몰입감 있는 시각 경험을 제공합니다.
추천 영화 섹션.
"추천" 섹션: 유사성을 기반으로 추천되는 관련 영화들을 모아 보여 주어, 관심 있는 영화와 연결된 추가 콘텐츠를 탐색하는 데 도움을 줍니다.
이를 구현하기 위해 예제 프로젝트에는 네 개의 API 엔드포인트를 포함했습니다
영화 > 세부 정보는 헤더 섹션용입니다
영화 > 크레딧는 “최상위 출연진” 섹션용입니다
영화 > 이미지는 “미디어” 섹션용입니다
영화 > 추천는 "추천" 섹션용입니다
이제 API 플러그인을 설정해 봅시다. 앞서 이 글에서 언급했듯이, Enterprise 요금제를 사용하는 경우 여러 API를 동시에 다룰 수 있어 데모와 유사한 포괄적인 경험을 제공받을 수 있습니다. 하지만 Pro 요금제를 사용 중이라도 걱정하지 마세요. 한 번에 하나의 플러그인씩 실행하면 데이터가 디자인에 채워지는 과정을 충분히 확인할 수 있습니다.
헤더 섹션
메서드: GET
헤더: "ACCESS_TOKEN"을 고유한 액세스 토큰으로 바꾸세요.
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie에서 오는 메시지: DETAILS
“Override URL with msg value” 체크박스를 선택했는지 확인하세요.
Pie로 보내는 메시지: DETAILS RESPONSE
"최상위 출연진" 섹션
메서드: GET
헤더: "ACCESS_TOKEN"을 고유한 액세스 토큰으로 바꾸세요.
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie에서 오는 메시지: CREDITS
“Override URL with msg value” 체크박스를 선택했는지 확인하세요.
Pie로 보내는 메시지: CREDITS RESPONSE
"미디어" 섹션
메서드: GET
헤더: "ACCESS_TOKEN"을 고유한 액세스 토큰으로 바꾸세요.
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie에서 오는 메시지: MEDIA
“Override URL with msg value” 체크박스를 선택했는지 확인하세요.
Pie로 보내는 메시지: MEDIA RESPONSE
"추천" 섹션
메서드: GET
헤더: "ACCESS_TOKEN"을 고유한 액세스 토큰으로 바꾸세요.
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie에서 오는 메시지: RECOMMENDATIONS
“Override URL with msg value” 체크박스를 선택했는지 확인하세요.
Pie로 보내는 메시지: RECOMMENDATIONS RESPONSE
디자인에 실제 데이터를 사용하는 이유
이 놀라운 프로토타입을 경험한 후, ProtoPie에서 데이터 중심 접근 방식이 왜 게임 체인저인지 살펴보겠습니다.
영화 리뷰 사이트, TV 스트리밍 서비스, 콘텐츠 관리 시스템 같은 플랫폼을 만들 때 실제 데이터에 몰입하는 것은 단순한 선택이 아니라 필수입니다. 세부 정보가 가장 중요한데도 상상에만 의존한다고 생각해 보세요. 바로 이 지점에서 디자이너에게 진짜 데이터를 살펴보는 일이 매우 중요해집니다. 실제 데이터를 활용하면 수많은 이점을 얻을 수 있습니다:
**프로토타입을 시험해 보세요: **실제 데이터는 프로토타입의 현실 점검 역할을 합니다. 실제 상황을 구성해 숨겨진 문제를 드러내고 다양한 시나리오를 탐색하게 해 줍니다. 예를 들어 영화 데이터에 썸네일이나 평점이 없다면 어떻게 처리하시겠습니까? 콘텐츠 길이가 달라져도 디자인이 레이아웃을 망치지 않고 적응할 수 있을까요?
**모두의 관심을 끌어 보세요: **실제 데이터는 프로토타입에 활력을 더해 이해관계자와 사용자가 “와, 멋지다!”라고 반응하게 만듭니다. 실제 데이터로 디자인이 어떻게 작동하는지 보면, 그들은 더 잘 이해하고 실제 기능에 대한 감을 잡을 수 있습니다.
**시간과 수고를 아끼세요: **디자인 과정에 실제 데이터를 섞어 넣으면 내용을 새로 만들거나 수동으로 업데이트할 필요가 줄어듭니다. ProtoPie의 API 플러그인은 마법 지팡이와 같아서, 추가 작업의 번거로움 없이 다양한 실시간 데이터 소스를 직접 프로토타입에 가져올 수 있게 해 줍니다.
**성능과 결과를 최적화하세요: **예제 프로젝트는 용량이 4.4MB에 불과할 정도로 가볍고, 데이터 자리 표시자를 위한 두 개의 템플릿 씬만 포함하고 있습니다. 이 전략은 자산 관리를 개선할 뿐 아니라 프로젝트 크기를 최적화하여 성능을 크게 향상시킵니다. 프로젝트 크기를 제어하면 동작이 더 매끄럽고 성능도 더 좋아지므로, 디자인 작업에서 중요한 요소입니다.
영화 메타데이터 자리 표시자용 템플릿.
비디오 스트리밍 및 TV UI 디자인 마스터클래스에 참여하세요
방금 경험한 것처럼 기능이 풍부한 프로토타입을 만드는 세부 사항을 더 깊이 탐구하고 싶다면, 더 볼 필요가 없습니다. 우리의 ProtoPie 마스터클래스는 실제 데이터를 매끄럽게 통합하고, 디자인에서 데이터를 처리하며 우아하게 보여 주는 기술을 익히고 싶은 여러분 같은 열정가를 위해 맞춤 설계되었습니다. 최첨단 프로토타이핑 기법이 펼쳐지는 여정을 준비하세요. 최신 흐름을 앞서가게 해 드립니다.
놓치지 마세요! ProtoPie School의 스마트 TV 및 비디오 스트리밍을 위한 프로토타이핑 과정에 등록하고, 기존 디자인의 경계를 뛰어넘는 여정을 시작하세요.
