소개
커리어 전환 마지막 과제로 Genspark를 이용한 나만의 웹페이지 만들기 실습입니다
진행 방법
4주차 브랜드 웹사이트 기획기로 아래와 같은 나만의 웹사이트를 만들기 위한 템플릿을 만들어서 genspark로 작업을 진행하였습니다
### **1. 브랜드 아이덴티티 (Brand Identity)**
| 항목 | 내용 |
| --- | --- |
| **브랜드명** | StemRegAI |
| **업종 / 전문 분야** | 의료/규제과학 |
| **미션 / 비전** | 규제과학에 ai를 담아서 초보자도 쉽게 규제대응 문서를 작성하게 합니다 |
| **슬로건** | "AI와 함께라면 누구나 규제과학 전문가" |
-----
### **2. 웹사이트 기획안**
#### **2.1. 사이트 목표**
* 브랜드의 전문성과 가치를 효과적으로 전달
* 관련이미지로 시각적 효과 향상
* 잠재 고객에게 서비스/제품 문의 및 구매 유도
* 타겟 고객과의 소통을 통해 브랜드 인지도 향상
#### **2.2. 전체 사이트맵 (Sitemap)**
```
1. 홈 (Home)
2. 소개 (About Us)
3. 서비스 (Services)
4. 블로그/콘텐츠 (Blog/Content)
5. 문의 (Contact)
```
-----
### **3. 페이지별 상세 기획**
#### **3.1. 홈 (Home)**
* **Hero Section (최상단)**
* **헤드라인:** `초보자도 쉽게 할 수 있는 규제과학 AI`
* **서브 헤드라인:** `규제과학 AI가 쉽게 도와줍니다`
* **CTA 버튼:** `규제과학 AI`
* **간략한 브랜드 소개**
* "어려운 규제과학을 초보 과학자도 쉽게 할 수 있는 도구를 개발합니다"
* **핵심 서비스 / 제품 (Core Services)**
* `규제과학 AI 챗봇 개발`
* `규제 대응 문서 검토`
* `규제 대응 RAG 시스템 개발`
#### **3.2. 소개 (About Us)**
* **브랜드 스토리 (Our Story)**
* "처음 규제과학 대응에 어려움을 겪고 어떻게 하면 누구나 쉽게 대응할수 있을까 궁리했습니다"이렇게 해서 나온 결과물입니다
파란색 배경과 한글 텍스트가 있는 웹사이트
한국사이트 스크린샷
한국사이트 스크린샷
Genspark가 결과 요약과 향후 개발 권장사항까지 알려주내요
📋 완성된 프로젝트 요약
✅ 구현된 주요 기능
반응형 네비게이션
데스크톱과 모바일 모두 지원
스크롤 시 자동 하이라이트
부드러운 스크롤 애니메이션
히어로 섹션
그라데이션 배경 효과
애니메이션 아이콘
강력한 CTA 버튼
브랜드 소개 섹션
미션 & 비전 표시
시각적 카드 디자인
브랜드 스토리 전달
서비스 섹션
3개의 핵심 서비스
상세 설명과 기능 리스트
호버 애니메이션 효과
블로그 섹션
3개의 블로그 카드
카테고리 태그
반응형 그리드
문의 양식
폼 유효성 검사
성공 메시지
연락처 정보
푸터
소셜 미디어 링크
빠른 링크
브랜드 정보
🎨 디자인 특징
색상 테마: 의료/과학 분야에 적합한 블루 & 그린
타이포그래피: Noto Sans KR + Inter 폰트
아이콘: Font Awesome 6.4.0
애니메이션: 부드러운 전환 효과 및 스크롤 애니메이션
반응형: 모든 디바이스에서 완벽하게 작동
📱 반응형 지원
✅ 데스크톱 (1200px 이상)
✅ 태블릿 (768px - 1199px)
✅ 모바일 (320px - 767px)
🚀 배포 방법
웹사이트를 온라인으로 배포하려면:
화면 상단의 Publish 탭을 클릭하세요
배포 설정을 확인하세요
Publish 버튼을 클릭하면 라이브 웹사이트 URL이 제공됩니다
📂 프로젝트 파일
stemregai-website/
├── index.html (17KB) - 모든 섹션 포함
├── css/
│ └── style.css (20KB) - 반응형 스타일
├── js/
│ └── main.js (11KB) - 인터랙션 로직
└── README.md (10KB) - 프로젝트 문서
🔮 향후 개발 권장 사항
블로그 기능 확장 - 실제 블로그 포스트 시스템
문의 양식 백엔드 연동 - 이메일 전송 기능
AI 챗봇 통합 - 실시간 고객 지원
다국어 지원 - 영어 버전 추가
고객 포털 - 회원가입 및 대시보드
여기에 다 올리기 충분치 않아서 링크 올립니다
https://www.genspark.ai/agents?id=8cd1e04b-ca62-4b37-b11d-dee6c61b0c82
결과와 배운 점
예전에 싸이월드 미니 홈피보다 더 쉽게 나만의 웹페이지를 그것도 훨씬 더 퀄리티 있게 구현할 수 있다는게 놀라울 따름입니다. 진작에 알았으면 나의 가치를 훨씬 더 높일 수 있었을건데.. 후회하기 보다는 AI 활용에 대해서 필요한 부분을 더 심도 있게 공부하고 투자해서 무한한 가치를 창출할 수 있다는 자신감을 얻었습니다.
Genspark 유료 가입을 안하면 크레딧 제한으로 아쉬운 부분이긴 한데 이정도 기능이면 유료로 사용해 볼 만한 가치가 있는거 같내요
실습과제로 마크다운 템플릿으 로 손쉽게 작성했는데 템플릿 없이 어떻게 시작하는지 공부를 해야겠고 많이 문의드려야 될 것 같내요
도움 받은 글 (옵션)
4주동안 주 2시간 공부가 뭔 도움이 될까 생각했지만 4주 이수하고 나니 AI 활용에서 만큼은 다시 태어났다고 해도 과언이 아닙니다. 단언컨데 수업전후 자신을 비교해 보면 전혀 다른 내 자신을 보는 것 같습니다. 그만큼 자신감도 많이 얻었습니다.
4주동안 많은 가르침을 주신 AJ님, 묘묘님께 다시 한번 더 감사 드리고 수업 진행에 도움을 주신 운영진께도 감사드립니다.
지피터스 AI 스터디 20기 대기자 신청했는데 이번 기회에 꼭 커리어 전환, 커리어 업을 완성하겠습니다
