소개
교육앱 만들기 스터디 오늘의 주제는, 자기 소개 랜딩 페이지를 만들기였습니다.
하지만 저는 기존에 웹 사이트를 운영 중이었기 때문에
굳이 한장짜리 랜딩 페이지가 필요할까 하는 생각이 들었죠.
하지만 생각을 고쳤습니다.
첫번째로 배울것은 제대로 배워야하고,
둘째로 웹사이트가 사실 개편을 예정에 두고 있어서
안 그래도 새로운 시각이 필요했기 때문입니다.
그동안은 제가 유튜브에 영상을 올리고 있음에도 얼굴을 노출하는 것을 꺼려 왔습니다.
하지만 이번 계기로 제 프로필 이미지도 만들고
웹 사이트에 대한 기획도 다시 해보기로 했습니다.
오늘의 목표는 요즘에 많이 사용되는 랜딩페이지를 만들어 보고,
발행까지 해 보는 것입니다.
다음 단계로는 현재 운영하는 홈페이지에 어떤식으로 접목할지 고민해 보는 것이 되겠습니다.
아래 내용 부터는 안티그라비티가 작성해준 원고에 제 생각을 추가한 내용입니다.
진행 방법
우선 소스로 제 웹사이트와 블로그 주소를 주었습니다.
그리고 작업은 AI 코딩 어시스턴트(안티그라비티)와 웹 호스팅 서비스인 Netlify를 활용했습니다. 크게 '디자인 리뉴얼 → AI 프로필 이미지 생성 → 글로벌 CSS 설정 → Netlify 배포 및 트러블슈팅' 순서로 진행했습니다.
1. 프롬프트를 활용한 웹사이트 디자인 및 프로필 사진 업데이트
AI에게 피그마 디자인 느낌을 설명하고,
그에 맞는 HTML/CSS 코 드 리뉴얼과 프로필 이미지 교체를 요청했습니다.
사용한 프롬프트:
"마라스튜디오 랜딩페이지 디자인을 제공된 피그마 템플릿에 맞춰서 리뉴얼해줘."
"프로필 사진은 IT 전문가 스타일로, 밝은 회색 후드티를 입고 자연스럽게 웃고 있는 모습으로 만들어줘."
"저작권을 위해서 푸터(Footer)에 참조한 피그마 링크를 디자인에 포함해줘."최초의 디자인이 너무 어둠 침침해서 마음에 들지 않아 디자인을 밝게 해달라고 했습니다.
레이아웃을 바꾸고 싶어서 지난번 앱 만들기에서 사용한 꼼수로
피그마 커뮤니티에서 디자인 가이드를 업어왔습니다. 디자인이 수정되었습니다.
하지만 레이아웃까지는 변경이 되지 않습니다. 이런 세세한 부분까지 설정하기엔 시간이 소모될 것 같아 다음에 시도 하기로 합니다. 지금은 패스.
그리고 후드를 입은 프로필 사진도 마음에 들지 않아서 결국 정장 차림에 단발로 최종 결정했습니다. 시간의 압박이 있으므로 취향을 따질 때가 아니었죠.
2. 전체 코드 구조 구현
AI가 작성해 준 완성된 HTML/CSS 코드입니다. 하나의 파일(index.html)에 소소한 애니메이션과 반응형 디자인까지 적용되었습니다.(안티그라비티 문투가 좀 귀여운 편이군요)
<!-- 실제 작성된 index.html 중 핵심 구조 일부 (너무 길면 일부만 발췌) -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마라스튜디오 | 디자인 & AI 수익화</title>
<style>
:root {
/* 피그마 템플릿 기반 컬러 시스템 적용 */
--primary: #FF005C;
--secondary: #FF8A00;
--bg-dark: #0F172A;
/* ... 생략 ... */
}
/* 프로필 이미지 스타일링 */
.profile-container {
width: 140px; height: 140px;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
}
</style>
</head>
<body>
<!-- 브랜드 소개 섹션 -->
<section class="brand dark-theme">
<div class="profile-container">
<img src="./profile.png" alt="마라스튜디오 운영자" class="profile-img">
</div>
<h2 class="brand-quote serif">잘 될 때도, 망할 때도 다 보여드립니다.</h2>
</section>
<!-- 푸터 피그마 저작권 표시 -->
<footer class="footer">
<div class="footer-bottom">
© 2024 Mara Studio. All rights reserved.
<div style="margin-top: 12px; font-size: 0.8125rem; opacity: 0.6;">
Design referenced from <a href="링크" target="_blank">Figma</a>
</div>
</div>
</footer>
</body>
</html>
결과와 배운 점
가장 크게 배운 점은 "질문하는 방법"과 "배포 환경의 특성 이해"입니다.
AI를 통해 퀄리티 높은 페이지를 얻으려면 막연한 요청보다
"밝은 회색 후드", "피그마 템플릿의 특정 톤"처럼 구체적인 묘사를 주는 것이
훨씬 작업 속도를 단축시켜 줍니다.
더 많은 것을 원하면 더 많이 질문하던가 더 자세히 질문해야 합니다.
HTML 파일을 성공적으로 완성하고 Netlify에 배포했는데,
기껏 생성한 프로필 사진(profile.png)이 엑스박스로 뜨거나 보이지 않는 문제가 발생했습니다.
링크 문제가 분명하지만, 과거엔 서버에 이미지 파일이 없거나
경로 문제로 뜨지 않아서 생기던 문제를 AI는 어떻게 해결하려나 생각했죠.
AI에게 "Netlify에 발행했는데 사진이 안 뜨네. 파일도 첨부해야 해?"라고 물어봤습니다.
당연하지만 이미지 파일도 있어야 한다고 하길래 HTML 문서만 올리지 말고
이미지 파일이 들어 있는 폴더째로 올리라는군요.
Netlify에 폴더로 올려도 용량이 허용되는구나 생각이 들었습니다.
아니나 다를까 나중에 너 사용공간이 ~% 넘었으니까 더 넘어가면
나중에 돈내야 한다고 메일이 왔습니다. 편리함에는 돈이 들어갑니다.
발표는 되었지만 샘플로 남기고 싶지는 않습니다.
현재의 홈페이지에 어떻게 접목시킬지 고민해볼 예정입니다.
