GUAVA의 왕초보를 위한
AI 기초개념-3[부록]
"코딩 1도 모르는데... 웹사이트 만들 수 있을까? "
커서 AI를 만난 지 이제 3개월째 접어든다. 11월 15일 첫 20달러를 결제했을 때, 꿈은 거창했습니다. 나만의 앱, 웹을 어떤 서비스도 쓰지 않고, 오로지 Gen-AI 제군들과 CursorAI로 만들겠다는...
첫 앱을 의외로 쉽게 만들었습니다. 구아바 스피릿 챗봇 앱, Google API를 연동한 구화체로 답변을 하는 앱. 지금은 쉬고 있지만 여전히 내 핸드폰에 깔려있지요.
그러다가 simpleKPT의 대 실패, 그리고 랜딩페이지는 이제 쉽게 만들지만, 그 이후 기능을 붙이다가 날려먹기를 수십 번...
다시 초심으로 돌아가서, 웹페이지를 어떻게 만드는지
나 같은 완전 비개발자, 완전 일자무식 왕초보들에게 간략하게 설명해보려고 합니다.
집 짓기로 이해하는 웹사이트 구조
건축과 출신, 건축 엔지니어 출신인 제가 집 짓기로 쉽게 설명해 드리겠습니다.
웹사이트의 구조, 이렇게 생각해 보세요
프런트엔드는 집의 겉모습입니다:
HTML은 집의 뼈대예요 (벽, 문, 창문의 위치)
CSS는 인테리어예요 (벽지 색깔, 가구 배치)
자바스크립트는 전기배선이에요 (스위치 누르면 불이 켜지죠?)
백엔드는 보이지 않는 부분입니다:
수도관처럼 데이터가 흐르는 길
보일러실처럼 중요 정보를 보관하는 곳
꼭 알아야 할 기초 용어들
도메인이 뭐예요? 집 주소라고 생각하세요!
www.naver.com을
예로 들면:
.com은 아파트 단지 이름
naver는 내가 지은 우리 집 이름
www는 우리 집 현관문
호스팅은 뭐예요?
호스팅은 집을 지을 땅이에요:
서버는 실제 컴퓨터예요
용량은 땅의 크기처럼 생각하면 돼요
트래픽은 들어올 수 있는 방문객 수예요
HTML/CSS/JS가 구체적으로 뭐예요?
HTML = 집의 뼈대
벽이 어디 있을지
문은 어디 달지
창문은 어디 낼지 이런 것들을 정하는 거예요
CSS = 인테리어 디자인
벽지는 무슨 색으로 할지
가구는 어떻게 배치할지
전체적인 분위기를 어떻게 낼지 이런 걸 결정해요
자바스크립트 = 전기 배선
스위치 누르면 불이 켜지고
초인종 누르면 소리가 나고
모든 움직이는 것들을 담당해요
웹사이트, 어떻게 만들까요?
코딩 없이도 만들 수 있어요! 노코드 툴을 소개합니다.
"빠르게 시작하고 싶어요"
리틀리를 추천드려요
인스타그램 프로필 같은 디자인
10분이면 완성할 수 있어요
기본 기능은 무료예요 (단, 고급 기능은 유료니 참고하세요!)
"전문적으로 보이게 만들고 싶어요"
아임웹이 좋아요
전문적인 디자인이 가능해요
쇼핑몰도 만들 수 있어요
자유롭게 편집할 수 있어요 (단, 유료 서비스라는 점 참고하세요)
상황별 맞춤 추천
프리랜서/작가라면
리틀리 + 구글 폼으로 충분해요
포트폴리오 전시하고
문의도 받고
비용 부담도 없어요
식당/카페라면
아임웹이 딱이에요
메뉴와 가격 소개하고
예약 시스템 연동하고
배달/포장 주문도 받을 수 있어요
구아바도 아직 홈페이지가 없습니다.
믿지 마세요. 할루시네이션 심합니다. 제가 입만 살았거든요! ^^
하지만 이제 알게 됐잖아요?
처음부터 완벽할 필요 없다는 걸.
작게 시작해서 천천히 발전시켜 나가면 된다는 걸.
P.S. AI와 관련은 있지만, AI 기초용어라고 하기에 애매한 것들은 부록으로 뺐습니다.
To Be Continue......
- Total HR / 사파 감성 HR & 나만의 AI를 찾고 있는 구아바 -
