📸 수업 현장 사진
🎯 수업 목표
6월 25일 수업 주제는 개인 홈페이지 만들기 (모바일) – Lovable였습니다. 개인 홈페이지는 단순한 명함이 아니라, 나를 소개하고, 하는 일을 보여주고, 방문자가 바로 연락·신청할 수 있게 돕는 온라인 프로필입니다.
특히 이번 수업에서는 데스크톱보다 모바일을 먼저 생각했습니다. 작은 화면에서도 글자가 잘 보이고, 버튼을 누르기 쉽고, 중요한 정보가 빠르게 전달되는 구조가 핵심입니다.
1. 나를 소개하기
이름, 직업, 전문 분야, 핵심 메시지를 첫 화면에서 명확히 보여줍니다.
2. 모바일 UI 구성
작은 화면에서도 읽기 쉬운 글자 크기, 여백, 버튼 배치를 설계합니다.
3. Lovable로 제작
원하는 홈페이지를 프롬프트로 설명하고, 결과를 보며 단계별로 수정합니다.
🧩 개인 홈페이지 추천 구조
첫 화면 · 이름, 직업, 한 줄 소개, 연락 버튼
소개 · 내가 누구이고, 어떤 문제를 해결하는지 설명
전문 분야 · 강점, 서비스, 기술, 경험을 카드로 정리
포트폴리오 · 프로젝트, 강의, 작업 사례, 성과
신뢰 요소 · 후기, 숫자, 경력, 수상 이력
연락 영역 · 전화, 이메일, 카카오톡, 상담 신청 버튼
💬 첫 프롬프트 작성하기
Lovable은 만들고 싶은 것을 자연어로 설명하면 초기 화면을 만들어 줍니다. 그래서 첫 프롬프트가 매우 중요합니다. “개인 홈페이지 만들어줘”처럼 짧게 쓰지 말고, 누구를 위한 것인지·어떤 섹션이 필요한지·모바일에서 어떻게 보일지 구체적으로 적어야 합니다.
모바일에서 보기 좋은 개인 홈페이지를 만들어줘. 대상은 AI 강사이자 컨설턴트야.
첫 화면에는 이름, 직업, 한 줄 소개, 상담 신청 버튼을 넣어줘.
아래에는 소개 · 전문 분야 · 강의 프로그램 · 포트폴리오 · 후기 · 연락처 섹션을 배치해줘.
전체 디자인은 흰색 배경, 검은색 글자, 넓은 여백, 큰 버튼, 읽기 쉬운 모바일 레이아웃으로.
📐 모바일 UI 설계 기준
✅ 좋은 모바일 UI
- 👍 글자가 충분히 크다
- 👍 버튼이 손가락으로 누르기 쉽다
- 👍 한 화면에 정보가 너무 많지 않다
- 👍 연락 버튼이 눈에 잘 띈다
❌ 피해야 할 UI
- 👎 글자가 작고 줄 간격이 좁다
- 👎 버튼이 너무 작거나 붙어 있다
- 👎 첫 화면에 설명이 너무 길다
- 👎 연락 방법을 찾기 어렵다
🛠️ 실습 순서
1단계 이름·직업·전문 분야·연락 방법 정리
2단계 홈페이지에 넣을 섹션 정하기
3단계 Lovable에 첫 프롬프트 입력
4단계 생성된 화면을 모바일 기준으로 확인
5단계 글자·여백·버튼·섹션 순서 수정 요청
6단계 연락 버튼·링크 정상 작동 확인
7단계 최종 결과물 공유·배포
오늘 수업 정리
Lovable을 활용하면 코딩을 몰라도 모바일 개인 홈페이지를 빠르게 만들 수 있습니다. 다만 좋은 결과를 위해서는 명확한 자기소개, 방문자 중심의 섹션 구성, 모바일 가독성, 구체적인 수정 프롬프트가 필요합니다. AI 도구로 나만의 브랜드를 온라인에 표현하는 첫걸음이었습니다.
