포트폴리오는 보통 PDF로 공유하지만, 가끔 링크로 제출해야 하는 경우도 있습니다. 구글 드라이브로 공유할 수 있지만 원티드, 리멤버와 같은 플랫폼에서 얼마나 접속했는지, 얼마나 체류하는지, 파일을 다운로드했는지 파악하긴 어렵습니다. Google Analytics로 트래킹 할 수 있는 방법을 찾다가 직접 웹페이지를 만들고, Github Page로 배포하는 방식을 택했습니다. (무료!)

 

요즘은 AI가 코드를 잘 작성해주기 때문에, HTML에 대한 지식이 없어도 쉽게 따라 할 수 있습니다. 저는 Cursor에서 Agent를 사용해 HTML을 편집했어요. 코드가 어렵다면 Cursor 사용을 적극 추천합니다! 

 

Cursor 설치, 환경 세팅

Cursor는 AI를 곁들인 코드 편집 프로그램입니다. 

다운로드 링크 : https://www.cursor.com/downloads 

실행해 상단 메뉴 탭에서 View > Extensions를 눌러줍니다. 

Live Server를 설치해줍니다. 이건 배포 전 로컬 서버로 웹 구현 형상을 확인할 수 있도록 돕는 익스텐션입니다. 

 

폴더, 코드 만들기

파일 편집기에서 폴더를 하나 생성하고, 파일 편집기에서 해당 폴더에 PDF 포트폴리오를 넣어줍니다. 이름은 영어로 해주셔야 문제 생길 일이 적어집니다. 

Cursor에서 폴더를 열어줍니다. 단축키는 Ctrl(Cmd) + O 입니다.

좌측 패널을 우클릭해 [New File]로 새 파일을 만들어 줍니다. 파일 이름은 index.html로 설정합니다. 

아래는 Cursor가 처음으로 짜준 코드입니다. (아마도.. 가물가물하네요) 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hyunmin Portfolio</title>

    <!-- Google Analytics 연결 -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={Google Analytics Tag}"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', '{Google Analytics Tag}');

        document.querySelector('.btn').addEventListener('click', function () {
                gtag('event', 'download', {
                    'event_category': 'portfolio',
                    'event_label': 'PDF 다운로드'
                });
            });
    </script>

    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 40px;
        }

        iframe {
            width: 80%;
            height: 600px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            font-size: 18px;
            text-decoration: none;
            color: white;
            background-color: #007bff;
            border-radius: 5px;
        }

        .btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <h1>My Portfolio</h1>
    <p>아래에서 포트폴리오를 확인하거나 다운로드할 수 있습니다.</p>

    <!-- PDF 뷰어 -->
    <iframe src="{포트폴리오 파일 명}"></iframe>

    <!-- 다운로드 버튼 -->
    <br>
    <a class="btn" href="{포트폴리오 파일 명}" download>포트폴리오 다운로드</a>
</body>

</html>

 

- {포트폴리오 파일 명} -> 파일 이름을 확장자(.pdf)까지 적어주시면 됩니다.

- {Google Analytics Tag} -> 뒷 단계에서 받을 Tag를 넣어주면 됩니다. 

 

Cursor 우측 하단에 "Go Live"를 누르면 브라우저에서 어떻게 보이는지 확인할 수 있습니다. 만약 없다면, Extensions에서 설치했던 Live Server가 활성화되어 있는지 확인해 보세요. 

iframe이 PDF가 보여지는 영역입니다. iframe에 별도 옵션을 설정하지 않으면, 구글 드라이브처럼 iframe 상단에 툴바(확대, 축소, 프린트, 다운로드 버튼)가 뜹니다. 이 툴바에서 이뤄지는 이벤트를 GA로 트래킹 하기 어려울 것이라고 생각해 toolbar를 지우고 별도 다운로드 버튼을 추가했습니다. 

툴바를 지우기 위해서는 iframe의 scr에 "{포트폴리오 파일 명}#toolbar=0&navpanes=0&scrollbar=0"로 뒤에 옵션을 붙여주면 됩니다. 하지만 이게 어려우신 분들은 cursor의 agent에게 요청하면 됩니다. Ctrl(Cmd) + K를 누르면 우측에 채팅 영역이 생길겁니다. Manual을 Agent로 바꾸고 명령을 입력하면 알아서 코드를 수정해 줍니다. 

저는 iframe(pdf viewer)의 크기를 화면의 width와 height에 맞추고, 불필요한 타이틀, 설명 텍스트는 제거했습니다. Agent한테 자연어로 명령을 내리고, Live Server로 바로 반영된 화면을 확인하고, 또 고치고... 이런 방식으로 최적의 UI를 구성하시면 될 것 같습니다.

구글 애널리틱스 연결을 위해 head 태그 안에 script를 추가했습니다. 그리고 PDF 다운로드를 트래킹하기 위해 이벤트를 심었습니다. GA 프로젝트 생성은 다음 글에서 이어 설명해드리겠습니다. 

'Develop' 카테고리의 다른 글

프로덕트 디자인 포트폴리오Github Pages로 공유하기 (3) : Google Analytics 세팅  (0) 2025.05.31
프로덕트 디자이너의 포트폴리오 Github Pages로 공유하기 (2) : Github Pages로 배포하기  (1) 2025.05.26
[OpenAI API] 401 Error - Incorrect API key provided  (0) 2023.03.30

티스토리툴바