업무자판기

사무직이 오늘 바로 쓰는 AI 툴 사용법

하루 한 툴

Gamma로 포트폴리오 사이트 만들기: 텍스트 입력부터 커스텀 도메인 연결까지

트리나타 2026. 8. 15. 07:30

대상 독자: 코딩 없이 자기 소개·작업물·연락처를 담은 한 장짜리 사이트를 빨리 올리고 싶은 프리랜서와 1인 사업자

완료 기준: Gamma 문서를 사이트로 전환해 gamma.site 주소로 게시하고, 커스텀 도메인이 필요한 경우 DNS 레코드 설정 절차를 파악함

확인 기준일: 2026-08-08

전제 조건: Gamma 계정(무료 가능), 커스텀 도메인 사용 시 본인 소유 도메인과 DNS 관리 권한, Gamma Pro 구독(커스텀 도메인 필수)

1. Gamma 사이트 생성: 텍스트에서 웹페이지로

Gamma는 AI를 활용하여 텍스트 프롬프트나 개요만으로 디자인과 레이아웃을 자동 생성하는 도구입니다. 복잡한 HTML/CSS 코딩 없이 포트폴리오 사이트를 구축할 수 있습니다. 사이트 생성은 '새로 만들기'와 '기존 문서 변환' 두 가지 경로가 있습니다.

경로 A: Sites 탭에서 새로 만들기

전혀 새로운 포트폴리오를 만드는 경우 이 방법을 사용합니다. Gamma 대시보드 상단의 Sites 탭으로 이동한 후 [Create new Site] 버튼을 클릭합니다.

  • 프롬프트 입력: "디자인 경력 5년의 UX 디자이너 김철수 포트폴리오 사이트, 미니멀리즘 스타일"과 같이 구체적인 지시를 입력합니다.
  • 템플릿 선택: AI가 제안하는 레이아웃 중 하나를 선택하거나, 제공되는 템플릿 라이브러리에서 직접 고릅니다.

경로 B: 기존 Gamma 문서 변환하기

이미 Gamma로 작업한 포트폴리오 데크(PPT 형태)가 있다면 이를 사이트로 전환하는 것이 효율적입니다. Gamma 도움말 센터에 따르면, 기존 문서를 사이트로 바꾸는 절차는 다음과 같습니다.

  1. 변환할 Gamma 문서 편집 화면 우측 상단 점 세 개 메뉴(⋮)를 클릭합니다.
  2. [Publish to Site] 옵션을 선택한 후, 하위 메뉴에서 [Convert to Site]를 누릅니다.
  3. 시스템이 문서를 사이트 구조로 재구성합니다. 이때 내비게이션 바나 페이지 연결 구조를 확인할 수 있습니다.

2. 콘텐츠 수정과 미리보기

AI가 생성한 초안은 세부 조정이 필요합니다. Gamma의 편집기는 블록(Block) 단위입니다. 텍스트, 이미지, 버튼 등 각 요소를 드래그 앤 드롭으로 순서를 바꿀 수 있으며, 우측 사이드바에서 테마 색상과 폰트를 전체적으로 변경할 수 있습니다.

포트폴리오 필수 요소 체크리스트:

  • 히어로 섹션: 이름, 직함, 핵심 가치 Proposition (예: "브랜드의 가치를 디자인으로 만듭니다")
  • 프로젝트 그리드: 썸네일 이미지와 프로젝트 요약문. 클릭 시 상세 페이지로 이동하거나 모달 창이 뜨도록 설정합니다.
  • 연락처 섹션: 이메일 링크, LinkedIn 프로필 링크, 문의 폼(외부 서비스 연동 권장)

게시 전 반드시 Preview 기능을 활용하세요. 데스크톱 뷰뿐만 아니라 모바일 및 태블릿 화면에서 텍스트가 잘려나가지 않는지, 버튼이 누를 수 있는 크기로 유지되는지 확인해야 합니다. Gamma는 반응형 웹 기술을 지원하지만, 고정 너비의 이미지를 너무 크게 넣으면 모바일에서 레이아웃이 깨질 수 있습니다.

광고

3. 게시하기: gamma.site 주소로 공개

준비가 끝났다면 사이트를 인터넷에 공개합니다. Gamma는 무료 사용자도 gamma.site 서브도메인을 제공합니다. 이는 별도의 웹 호스팅 서버 설정 없이 Gamma 인프라를 빌려 쓰는 방식입니다.

전체 사이트 게시

편집 화면 상단의 [Publish] 버튼을 클릭합니다. 이때 URL 슬러그(주소의 마지막 부분)를 설정할 수 있습니다.

https://yourname.gamma.site/

예: https://kim-design.portfolio.gamma.site/

단일 페이지 게시

전체 사이트가 아닌 특정 페이지만 공유해야 할 때는, 좌측 사이드바의 Pages 패널에서 해당 페이지 이름 옆의 점 세 개 메뉴를 클릭하고 [Publish This Page]를 선택합니다. 이는 전체 포트폴리오 중 '소개' 페이지만 클라이언트에게 보내는 등 부분적 공유에 유용합니다.

4. 커스텀 도메인 연결: Pro 구독과 DNS 설정

무료 버전의 gamma.site 주소는 임시적인 느낌이 강할 수 있습니다. 브랜드 아이덴티티를 강화하려면 커스텀 도메인 연결이 필요합니다. 이 기능은 Gamma Pro 구독자만 사용할 수 있습니다.

연결 방법 두 가지

  1. 자동 설정: Gamma에서 제공하는 호스팅 파트너를 통해 도메인을 구매한 경우, 몇 번의 클릭으로 연결이 완료될 수 있습니다.
  2. 수동 DNS 설정 (권장): GoDaddy, Cloudflare, Hostinger 등 별도의 업체에서 도메인을 보유하고 있다면 DNS 레코드를 직접 수정해야 합니다.

DNS 레코드 설정 단계별 가이드

대부분의 도메인 관리자는 유사한 인터페이스를 제공합니다. 아래는 일반적인 설정 절차이며, 구체적인 메뉴 위치는 각 업체 매뉴얼을 참고하시기 바랍니다. Cloudflare DNS 공식 문서의 원리를 기반으로 설명합니다.

1단계: Gamma에서 도메인 추가

Gamma 사이트 설정 화면(Setting)에서 [Custom Domain] 탭을 엽니다. 사용할 도메인 주소(예: www.myportfolio.com)를 입력하고 [Connect] 또는 [Add Domain]을 누릅니다. Gamma는 연결해야 할 DNS 레코드 값(CNAME 또는 A 레코드 정보)을 제공합니다.

2단계: 도메인 호스팅 업체에서 레코드 생성

본인이 소유한 도메인의 DNS 관리 대시보드로 이동합니다. [Add record] 버튼을 누르고 다음과 같이 설정합니다.

항목 설정 값 (예시) 설명
Type CNAME 또는 A Gamma 안내에 따름. 주로 CNAME을 사용합니다.
Name (Host) @ 또는 www 루트 도메인은 @, 하위 도메인은 www를 입력합니다.
Value (Target) Gamma가 제공하는 주소 예: cname.gamma.app 등 Gamma에서 지정한 값으로 정확히 복사
TTL Auto 또는 3600 레코드 유효 시간. 변경 사항을 빠르게 반영하려면 낮은 값을, 안정성을 위해 Auto를 선택합니다.

참고: Cloudflare를 사용하는 경우, Proxy status 항목이 존재합니다. SSL 설정에 따라 DNS only (구름 회색) 또는 Proxied (구름 주황) 중 하나를 선택해야 합니다. Gamma의 안내에 명시된 대로 설정하지 않으면 연결 실패가 발생할 수 있습니다.

SSL 인증서 발급과 대기 시간

DNS 레코드를 저장한 후 Gamma 화면으로 돌아와 [Verify] 또는 [Check Status]를 누릅니다. 중요한 제약사항은 다음과 같습니다.

  • 반영 지연: DNS 변경 사항은 전 세계 서버에 전파되는데 시간이 걸립니다. 보통 몇 분에서 수 시간까지 소요될 수 있습니다.
  • SSL 발급: 도메인 연결이 확인된 후 HTTPS 보안 인증서(SSL)가 자동으로 발급됩니다. 이 과정 또한 즉시 완료되지 않을 수 있으니, "Pending" 상태라도 무작정 재시도하지 말고 잠시 기다리세요.

5. 자주 묻는 질문 (FAQ)

Q1. 무료 계정으로 커스텀 도메인을 쓸 수 있나요?
A1. 아닙니다. 커스텀 도메인 연결 기능은 Gamma Pro 유료 구독자만 이용 가능합니다. 무료 사용자는 gamma.site 서브도메인을 사용해야 합니다.

Q2. DNS 설정 후 즉시 사이트가 뜨지 않다면 어떻게 해야 하나요?
A2. DNS 전파(DNS Propagation) 시간 때문입니다. 레코드 입력이 정확한지 다시 확인한 후, 1~24시간까지 기다려야 할 수 있습니다. 브라우저 캐시를 비우거나 시크릿 모드에서 접속해 보시는 것도 도움이 됩니다.

Q3. 기존에 만든 Gamma 프리젠테이션을 사이트로 바꿀 때 디자인이 깨지면요?
A3. [Convert to Site] 기능은 자동으로 레이아웃을 변환하지만, 복잡한 애니메이션이나 특정 배치 요소는 웹 환경에 맞지 않을 수 있습니다. 변환 후 페이지 단위로 요소를 손으로 재배치하거나, 텍스트 블록의 크기를 조정해야 할 수 있습니다.

참고 자료

반응형