AI나 홈페이지 제작에 조금이라도 관심을 가지고 있는 사람이라면, 최근 AI를 활용해 홈페이지를 만드는 것이 너무나도 쉬워졌다-는 내용의 기사를 한번쯤 본 경험이 있을 것이다. 요지는 코딩을 할 줄 모르는 사람도 쉽게 홈페이지를 만들 수 있다는 것인데, 백엔드 개발자인 나 또한 프론트엔드의 기본적인 지식은 가지고 있지만, 깊이있게 특히 CSS는 감각이 없다시피 하기 때문에 AI의 도움을 받아 자기소개 페이지를 만들어 보았다.
(물론 나는 실습이 목적이었기 때문에 각종 html, css 문서를 뒤져가며 정말 간단한 형태의 페이지를 하나 만들고, 그 다음에 제미나이로 처음부터 다시 만들어줬다.)
깃허브 바로가기
자기소개 웹 페이지 작성 조건은 다음과 같다.
페이지 구성하기
자기소개 페이지를 작성하기에 앞서, 어떤 페이지들로 구성을 할지를 정할 필요가 있다. 나는 기존에 ppt로 작성해둔 자기소개가 있었기 때문에 그것을 기반으로 홈페이지화를 진행하기로 했다.
그렇게 만들어진 3개의 페이지는 다음과 같다.
1. index.html
메인이 되는 페이지이다.
이하 2개의 html 문서를 하이퍼링크로 연결하여 오가는 연결 통로가 될 것이며, 깔끔하고 명시적으로 작성할 예정이다.
2. about.html
About Me에 해당하는 자기 소개를 담을 페이지이다.
상단바를 고정시켜 홈(index.html)으로 언제든 돌아갈 수 있게 설정할 예정이다.
3. likes.html
좋아하는 것들을 담을 예정이다.
예를 들면, 음식, 여행 사진, 영화나 드라마 등등이 될 수 있겠다.
마찬가지로 상단바를 고정시켜 홈(index.html)으로 언제든 돌아갈 수 있게 설정할 것이다.
reference 찾기
3개의 페이지 구상을 마쳤으면 이제 레퍼런스를 찾아야 한다. 나는 구글에 '자기소개 페이지', '개발자 자기소개 페이지'와 같이 검색을 하고 이미지 탭에서 마음에 드는 레이아웃을 찾아보았다. 만들고 싶은 스타일과 내용을 어느 정도 머릿속에 구상한 상태에서 찾아야 이후 시행착오 없이 페이지를 작성할 수 있을 것이다.
(물론 그럼에도 시행착오는 언제나 존재한다...)
나는 페이지 별로 레퍼런스를 따로 찾았기 때문에, 페이지를 작성하는 중간중간에 레퍼런스를 추가로 찾아줬다.
따라서, 페이지별로 진행을 하면서 레퍼런스가 된 블로그(이미지) 링크를 첨부하도록 하겠다.
페이지 작성하기
index.html
메인 페이지는 한눈에 들어오면서 누가봐도 이것이 자기소개 페이지라는 것을 알 수 있을 만큼 직관적이어야 했다. 그런 면에서 정니정은니 님이 만드신 자기소개 페이지의 메인 화면이 가장 좋다고 생각해서 레퍼런스로 삼았다.
[위코드 35기]HTML, CSS로 자기소개 페이지 만들기
위코드 사전스터디 첫번째 과제는 HTML,CSS로 자기소개 페이지 만들기! 되게 간단해보이지만 메뉴를 어떻게 구성하고 어떠한 내용을 넣고 어떻게 레이아웃을 할지 많은 고민 끝에 탄생했다. 회사
jeongeuni.tistory.com
방법은 간단하다.
구글 제미나이 채팅에 메인 화면 이미지를 복사해서 넣고, [ 이런 느낌으로 깔끔하게 자기소개 페이지 만들어줘. html, css 파일 분리해줘. ] 이렇게 프롬프트를 같이 넣어주면 된다.
결과로 나온 코드를 복사해서 각각 index.html, style.css로 vscode에 붙여넣어주면 된다.
제미나이가 처음 생성해준 결과 화면이다. 이것을 내 입맛에 맞게 수정을 해주면 되는데,
우선 <title> 태그와 <body>의 <h1> 태그에 있는 이름을 내 이름으로 수정해준다.
그리고 <img> 태그의 src에 들어있는 주소를 나의 이미지 경로로 바꿔주면 된다.
img 경로는 만약 프로젝트 폴더(index, style 파일이 들어있는 폴더. 예를 들면 introduce) 안에 넣어줬다면 <이미지파일이름.jpq> 와 같이 넣어준다. 만약 웹상에 존재하는 이미지라고 하면 다운받아서 폴더에 넣을 수도 있겠지만, 마우스 우클릭 -> 이미지 주소 복사를 통해 복사한 주소를 src에 넣어줄 수도 있다.
이외에도 어떤 메뉴(About me, Like 등)를 둘 것인지, 어떤 contact를 둘 것인지 등을 조정해주면 된다.
만약 나와 같이 다른 아이콘을 넣고 싶다면 bootstrap icons에서 마음에 드는 아이콘을 찾아 넣어줘도 좋다.
나는 티스토리 아이콘을 넣고 싶었는데, 그런 건 bootstrap icons에 존재하지 않아서 제미나이를 갈궈서 찾아냈다. 구글링을 하면 티스토리에 파비콘 넣는 방법만 쏟아진다..
Simple Icons에 티스토리 로고가 존재한다고 알려줬는데, 아래 코드를 적절한 위치에 붙여넣으면 된다.
index.html
<div class="social-links">
<a href="#" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
<a href="https://github.com/uonce" aria-label="GitHub"><i class="bi bi-github"></i></a>
<!-- 여기 -->
<a href="https://your-tistory-blog.tistory.com" aria-label="Tistory">
<img src="https://cdn.simpleicons.org/tistory/333333" alt="Tistory" />
</a>
</div>
style.css
/* 4. 소셜 링크 아이콘 */
.social-links {
margin-top: 50px; /* 메뉴와 아이콘 사이의 여백 */
}
.social-links a {
text-decoration: none;
color: #333;
font-size: 1.8rem; /* <i> 아이콘 폰트 크기 */
margin: 0 15px;
/* [추가] <i>와 <img> 아이콘의 세로 정렬 기준을 맞춰줌 */
vertical-align: middle;
}
/* [추가] Simple Icons CDN(img)을 위한 스타일 */
.social-links a img {
/* <i> 태그의 font-size와 높이를 맞춤 */
height: 1.8rem;
/* 너비는 높이에 맞춰 자동으로 조절 */
width: auto;
}
나는 개인적으로 폰트(Pretendard)도 좀 더 깔끔한 것을 사용하고, 이미지 크기도 좀 키우고 싶어서 html과 css를 조금씩 만져주었다. 프론트 지식이 전혀 없어도, 요구사항을 제미나이에 계속해서 얘기하면 알아서 수정해주니 어렵게 생각할 것 없다.
본인이 만족스러울 때까지 수정이 완료되었다면 다음으로 넘어가자. : 하나의 페이지를 완벽하게 만들고 넘어가는 것을 추천한다. 계속 같은 스타일을 적용해줘야하기 때문에 이전 페이지에서 변화가 생기면, 다음 페이지까지도 일일히 찾아서 수정을 해줘야 한다.
about.html
About me 메뉴에 연결할 about.html을 만들어보자.
나는 여기서 또 다른 레퍼런스를 찾아 돌아다녔다. 간단한 자기소개 정도로 넘겨도 되지만, 포트폴리오처럼 나의 이력을 한눈에 보여줄 수 있는 레이아웃이었으면 좋겠다고 생각했다.
유튜브 썸네일이었는데, 너무 마음에 들어서 유튜브 내용은 안보고 이미지만 복사해왔다. 아마 만드는 방법을 차근차근 알려줄 것 같으니 흥미가 있는 분은 영상을 보면서 따라해봐도 좋겠다.
나는 썸네일 이미지만 복사해와서 제미나이에게 던져줬다.
prompt : 여기서 이제 about me 페이지를 이런(이미지) 느낌으로 만들고 싶은데, 스타일은 통일해줬으면 좋겠어. 그리고 링크를 눌렀을 때 애니메이션 효과처럼 옆의 소개가 밑에서부터 올라오거나 흐린 상태에서 진해지는 효과가 있었으면 좋겠어. 어쨌든 등장하는 것처럼. 새로 페이지를 만들고, css 파일도 분리해서 만들어줘. 스타일만 동일하게.
사실 중간중간 시행착오를 거치며 결과를 보완했지만, 내가 제미나이에 요청한 프롬프트를 모두 합치면 위와 같다. 결과는 다음과 같이 나온다.
화질이 좀 깨지긴 하지만, 애니메이션까지 잘 들어가있는 것을 알 수 있다. 애니메이션은 화면이 로딩될 때 최초로 작동한다. 나는 여기서 오른쪽 부분을 날리고, 왼쪽 소개 부분과 프로필 부분만 살려서 값을 수정해주었다. 전화번호나 웹사이트 등의 불필요한 정보는 제거하고, 대신 전공을 추가해주었다. 전공 아이콘은 다음과 같이 삽입했다.
<ul class="person-info">
<li><i class="bi bi-mortarboard"></i> 컴퓨터공학부</li>
</ul>
프로필 사진의 사이즈를 키웠고, 왼쪽 소개 부분과 프로필에 서로 다른 애니메이션을 적용하였다.
/* 페이지 로드 시 등장 효과 (아래에서 위로 + 투명도) */
@keyframes fadeInSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInSlideRight {
from {
opacity: 0;
transform: translateX(0);
}
to {
opacity: 1;
transform: translateX(40px);
}
}
/* 애니메이션 적용 클래스 */
.fade-in-on-load {
animation: fadeInSlideUp 1s ease-out forwards;
}
.fade-in-profile-on-load {
animation: fadeInSlideRight 1s ease-out forwards;
}
메인화면에서 프로필이 중앙에 있었기 때문에, 페이지가 연결되는 느낌을 주기 위해서 프로필 사진은 중앙에서 오른쪽으로 이동하도록 해줬고, 왼쪽의 소개 부분은 동일하게 아래에서 위로 올라오도록 해주었다. 필요하다면 fade-in-on-load, fade-in-profile-on-load에 들어있는 1s를 3s / 0.5s 등으로 조정하여 애니메이션 속도를 설정해줄 수 있다.
여기서 추가로 프로젝트 경험이나 이력 등을 하단에 넣고 싶다는 생각이 들어서, 실제로 요소를 추가해주지는 않았지만 스크롤이 될 것을 고려하여 상단바 고정을 해주었다.
상단바 고정 코드는 다음과 같다.
/* html */
<nav class="page-nav">
<div class="page-nav-inner">
<a href="index.html">🏠 Home</a>
</div>
</nav>
/*css*/
.page-nav {
position: fixed; /* 이 부분이 상단 고정에 필수적이다 */
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 1000; /* 맨 앞에 보이도록*/
}
/* "ABOUT ME" 메인 제목 */
.section-title {
/* 기타 요소 */
/* 고정 헤더(.page-nav)가 콘텐츠를 가리지 않도록 */
padding: 100px 20px 40px 20px;
}
likes.html
마지막으로 likes.html을 구현해보자.
새로운 레퍼런스를 또 찾아 나섰다. 기준에는 약간 일기 같은 느낌으로 사진을 쭉 넣어놓고 슬라이드로 넘길 수 있게 하려고 했는데, 레퍼런스를 찾아다닌던 중에 마음에 드는 갤러리 형식을 발견했다.
자기소개 페이지 만들기(2)
지난번 만들었던 자기소개 페이지에서 반응형 작업 및 디자인 요소를 보충하고 이외에 몇가지 동적인 기능도 추가했다.
velog.io
sujin 님의 블로그인데, 이분이 만드신 자기소개 페이지 중에 My Favorite 부분이 나의 likes를 잘 표현해낼 수 있는 디자인이라고 생각되어 레퍼런스로 삼았다.
마찬가지로 My Favorite 부분의 이미지를 복사해 제미나이에 붙여넣고, 다음과 같은 프롬프트를 작성해 주었다.
prompt: 여기서 My Favorite과 같이 페이지를 만들어줘. 스타일은 현재거를 적용.
초기 화면은 다음과 같이 나왔다.
여기에 이미지를 넣고, 색상 및 레이아웃을 살짝 조정해주었다. 우선 페이지가 너무 비어보였기 때문에 9장의 이미지를 넣어주고, 3x3 배열로 갤러리 레이아웃을 변경해준 것이 가장 큰 변화가 되겠다. 그리고 My Favorite도 Likes로 바꿔주었다.
하지만 사실 나는 페이지가 로딩될 때 사진이 보이지 않다가 하나씩 랜덤하게 떠오르는 애니메이션 효과를 주고 싶었다. gif가 아닌 이미지만 제미나이에게 제공하였기 때문에 당연히 애니메이션이 적용되어 있을 리가 없었다. 또한 랜덤하게 이미지가 등장하는 애니메이션의 경우 css만으로는 어려워서 페이지 제작 처음으로 javascript를 사용해 주었다.
// 1. HTML 문서가 모두 로드되면 실행
document.addEventListener('DOMContentLoaded', () => {
// 2. 갤러리의 모든 'gallery-item' 요소를 가져옴
const galleryItems = document.querySelectorAll('.gallery-item');
// 3. 0부터 (이미지 개수 - 1)까지의 숫자 배열 생성
const indices = Array.from(Array(galleryItems.length).keys());
// 4. 인덱스 배열을 무작위로 섞음 (Fisher-Yates Shuffle)
for (let i = indices.length - 1; i > 0; i--) {
// 0부터 i까지의 랜덤한 인덱스 j를 뽑음
const j = Math.floor(Math.random() * (i + 1));
// i번째 요소와 j번째 요소를 맞바꿈
[indices[i], indices[j]] = [indices[j], indices[i]];
}
// 5. 섞인 순서대로 0.15초(150ms) 간격으로 'visible' 클래스 추가
indices.forEach((shuffledIndex, order) => {
setTimeout(() => {
// 'shuffledIndex' = 랜덤하게 뽑힌 이미지 번호
galleryItems[shuffledIndex].classList.add('visible');
}, order * 150); // 'order' = 0, 1, 2... 순서
});
});
작성한 코드를 likes.html에 <script> 태그를 이용해 잘 연결해주고 실행해보면 아래와 같이 매끄러운 애니메이션 효과를 볼 수 있다.
이렇게 구글 제미나이(gemini)와 함께 html, css, javascript를 활용해 자기소개 페이지를 만들어 보았다. 유레카 백엔드 과정 3일간 배운 것을 기반으로 워크샵을 진행했고, 나름 만족스러운 결과물을 낼 수 있었다. 물론 제미나이의 도움을 많이 받긴 했지만, 코드를 보면서 내 마음에 들게 수정한 부분도 꽤 많았다. 아마 기본적인 지식이 없었다면 시간이 더 많이 걸렸을 것이라고 생각한다.
정리된 코드는 아래 깃허브에서 볼 수 있다.
GitHub - uonce/web-profile: 자기소개 페이지 (html, css, javascript 활용)
자기소개 페이지 (html, css, javascript 활용). Contribute to uonce/web-profile development by creating an account on GitHub.
github.com
더불어, 나는 레퍼런스를 기준으로 페이지를 만들었지만, 디자인 능력이 있다면 Figma를 통해 디자인한 페이지를 기반으로 꼭 gemini가 아니더라도 각종 AI에게 페이지를 만들어달라고 요청해보기를 추천한다.
개인적으로 만든 자기소개 페이지를 하나로 합쳐, netlify에 배포하는 작업까지 진행하기도 했다. netlify 홈페이지를 통해 수동 배포하는 것부터 깃허브 액션을 통해 자동 배포하는 것까지 따로 실습을 해봤는데, 이에 대해서는 다음에 다뤄보도록 하겠다.
'유레카' 카테고리의 다른 글
| 트랜잭션(transaction), 트랜잭션 고립 수준(Isolation Level) (1) | 2025.10.27 |
|---|---|
| [유플러스 유레카] 미니프로젝트 (3 DAYS) - 스터디카페 관리 시스템 (0) | 2025.10.26 |
| [LG 유플러스 유레카 #2] 알고리즘 - 순열, 조합 (0) | 2025.09.21 |
| [LG 유플러스 유레카 #1] 9월 1주차, 버퍼, BufferedReader, InputStreamReader (0) | 2025.09.09 |
