🏛️ [Archive] 개발 프로젝트 & 회고/개발 및 프로젝트 수행 ⭐

멀티 링크 페이지 개발 : 깃허브를 활용한 간편한 링크 관리

히주 2024. 8. 27. 16:55

 

 

안녕하세요. 요즘 4학년이라 마음이 많이 복잡한 학생입니다.

학생이란 신분의 기간이 5달도 안 남으니 학생이라는 호칭이 너무 소중해지고 대학교 안에서 당당히 학생이라고 서 있을 수 있음에 감사한 요즘이에요.

 

 

짧은 인턴 활동을 마치고 개강 전 1주일이라는 방학이 주어져 이력서나 써보자 싶은 마음으로 작성하다가 어쩌다 보니 멀티 링크페이지를 만들어봤어요. (인스타그램 프로필에 여러 링크를 한거번에 걸 수 있는 링크트리 페이지들이 요즘 너무 많이 보이더라구요. 그래서 코드로 손민수를 해봤어요.)

개발자들은 깃허브(GitHub), 링크드인(LinkedIn), 온라인 이력서(CV) 등 다양한 플랫폼에서 자신의 커리어를 관리하는데요. 여기서 저는 링크트리 페이지와 같이 여러 곳에 분산된 나의 커리어를 한번에 관리하고, 하나의 페이지에서 모든 링크를 손쉽게 접근할 수 있도록 하는 멀티 링크 페이지를 코드를 통해 만들어보면 어떨까 라는 생각을 시작으로 진행하였습니다. 프론트에 대해서 하나도 몰랐던 저였지만 어찌저찌 만들어봤는데 결과물이 깔꼼 하게 나와서 기분이 좋더라구요!

 

 

먼저 결과물을 보여드리자면 다음과 같이 나와요!  (링크 :  https://yiheeju.github.io/My_Linktree/ )

왼쪽은 휴대폰에서 접속했을 때, 오른쪽은 컴퓨터에서 접속했을 때 결과물이에요 깔끔하죠??

HTML과 CSS를 사용하여 만들었으며, 간단하게 나의 링크들을 한 페이지에 모아둠으로써 면접관이나 다양한 사용자들이 손쉽게 접근할 수 있도록 만들었습니다. 나에 대해서 보여주고 싶다면 MZ답게 명함대신 링크를 내미세요!

또한, GitHub Pages를 이용하여 링크 페이지를 배포를 통해, 다른 사용자도 간편하게 접속할 수 있도록 하였습니다.

 

 

본 프로젝트는 Windows 노트북에서 진행되었으며, VSCode와 WSL(Ubuntu 22.04) 환경에서 작업하였습니다. 이미 GitHub와 Git 연동이 완료된 상태에서 작업을 시작하였습니다.

 

 

 

1. 프로젝트 폴더 생성 및 파일 구성

VSCode에서 프로젝트 폴더 heeju_cv 를 생성하고, index.html , styles.css, .gitignore 을 생성해주었습니다.

또한 프로필 이미지에 넣어줄 이미지  heeju.jpg 를 넣어줬습니다.

(여기서 이미지 형식은 .jpg아니면 .png 형식이 가장 좋습니다.)

heeju_cv

 ㄴ index.html

 ㄴ styles.css

 ㄴ .gitignore

 ㄴ heeju.jpg   (이미지 파일명.jpg )

(파일 명은 동일하게 해주시는 것이 좋아요!! 만약 다르게 설정했다면 html코드에서도 해당 파일명을 수정해주셔야해요!)

 

 

2. HTML 코드 작성 ( index.html의 코드 )

나의 링크 페이지를 구성하는 기본적인 구조입니다. Profile 섹션에는 사용자 사진과 이름, 이메일 정보가 포함되어져 있으며, Links 섹션에서는 사용자가 원하는 주요 링크들로 연결되는 버튼들이 배치되어 있습니다. 각 버튼을 클릭 시 설정된 URL로 이동하도록 설정되어 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HeeJu's Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="profile">
            <img src="heeju.jpg" alt="Your Photo" class="profile-image">
            <h2>HEEJU'S PAGE</h2>
            <p>Contact : <a href="mailto:yiheeju0330@gmail.com">yiheeju0330@gmail.com</a></p>
        </div>
        <div class="links">
            <button onclick="location.href='https://www.notion.so/CV-650546e7503548cdb25a23f8d17ae0fd?pvs=4'">HEEJU'S CV</button>
            <button onclick="location.href='https://www.linkedin.com/jobs/'">LINKED IN</button>
            <button onclick="location.href='https://github.com/YiHeeJu'">GITHUB</button>
            <button onclick="location.href='https://yiheeju.tistory.com'">TISTORY</button>
            <button onclick="location.href='https://www.instagram.com/luna_luz._/'">INSTAGRAM</button>
        </div>
    </div>
</body>
</html>
  • heeju.jpg에는 프로필 이미지에 들어갈 사진이 들어가는데 필요한 이미지입니다.
  • contact부분에 href="mailto:(자신의 이메일)"을 적어주시면 페이지상에서 다음과 같이 이메일을 보낼 수 있는 창이 떠요.

  • links 부분에는 버튼을 클릭하면 저장한 경로로 이동할 수 있도록 해주는 코드 부분이에요.
     <button onclick="location.href='(링크 경로)'">(프론트에 보여줄 이름)</button>
     ex)
     <button onclick="location.href='https://github.com/YiHeeJu'">GITHUB</button>

 

 

3. CSS 코드 작성 ( styles.css의 코드 )

페이지의 전체 스타일을 정의합니다. body는 페이지의 기본 레이아웃을 설정하며, contriner는 중앙에 위치한 카드 스타일의 레이아웃을 만듭니다. profile-image는 반응형으로 크기를 조절하며, links button에서는 클릭 시 검정색이 퍼지는 효과가 적용됩니다.

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f9f9f9;
}

.container {
    text-align: center;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

.profile {
    margin-bottom: 60px;
}

.profile-image {
    width: 100%;
    max-width: 120px; /* 최대 너비 설정 */
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .profile-image {
        max-width: 100px; /* 모바일에서의 크기 조정 */
    }
}

.profile h2 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}

.profile p {
    font-size: 12px;
    color: #555;
}

.profile a {
    color: #7c7c7c;
    text-decoration: none;
}

.profile a:hover {
    text-decoration: underline;
}

.links button {
    position: relative;
    display: block;
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    font-size: 18px;
    background-color: #ffffff;
    color: #333;
    border: 2px solid #fcfcfc;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.links button:hover {
    background-color: #000000;
    color: white;
}

/* Ripple Effect */
.links button:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: black;
    opacity: 0;
    transition: all 0.8s;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.1);
}

.links button:active:after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
    transition: all 0.5s;
}

@media (max-width: 768px) {
    .container {
        width: 90%;
        padding: 20px;
    }
}

 

4. .gitignore 파일

Git이 관리하지 않도록 할 파일 및 폴더를 지정합니다. 주로, node_modules와 같은 라이브러리 파일이나 .env와 같은 환경 변수 파일을 Git의 버전 관리에서 제외하는 데 사용됩니다.

node_modules/
.env
*.log

 

5. GitHub를 통한 배포 및 업데이트

1) 로컬 리포지토리에서 커밋하기

코드 수정이 완료되면, 모든 파일을 Git에 추가하고 커밋합니다.

 

git add .

git commit -m "Initial commit with HTML and CSS"

 

 

2) GitHub 리포지토리로 푸시

커밋이 완료되면, 로컬 리포지토리를 GitHub 리포지토리에 푸시합니다.

 

git push origin main

 

 

3) GitHub Pages 활성화 

GitHub 리포지토리의 Settings 탭에서 Pages 항목을 찾아 GitHub Pages를 활성화합니다.

브랜치는 main을 선택하고, root로 설정하여 배포(save)합니다.

 

 

4) 링크 트리 생성

GitHub Pages URL을 사용하여 나만의 링크 페이지( https://yiheeju.github.io/My_Linktree/ )를 공유할 수 있습니다.

다른 사용자들은 이 URL을 통해 언제든지 나의 페이지에 접속할 수 있습니다.

 

 

 

이로써 깃허브(GitHub)와 연동하여 간단하고 직관적인 멀티 링크 페이지를 구현할 수 있었습니다.

 

이 페이지는 위의 코드 형식에서 간단한 코드 수정을 통해서 개발 관련 정보뿐만 아니라, 내 개인 계정이나 블로그 계정 등 다양한 콘텐츠를 손쉽게 관리하고 공유할 수 있는 도구로 활용될 수 있습니다.

서버를 운영할 필요 없이, 깔끔한 인터페이스로 내 커리어를 효율적으로 관리하고 면접관이나 관심 있는 이들에게 손쉽고 깔끔하게 보여줄 수 있는게 너무 멋지지 않나요??

 

해당 코드들은  아래 깃허브에 업로드 되어져있으니 들고가셔서 사용하시면 되어요:)

 

GitHub - YiHeeJu/My_Linktree

Contribute to YiHeeJu/My_Linktree development by creating an account on GitHub.

github.com

 

 

'🏛️ [Archive] 개발 프로젝트 & 회고/개발 및 프로젝트 수행 ⭐'의 다른글

  • 현재글멀티 링크 페이지 개발 : 깃허브를 활용한 간편한 링크 관리

티스토리툴바