나 혼자 산다. 바이브코딩과 함께. 8장

 

 

 

PART 3

첫 번째 프로젝트: 나만의 웹사이트

 

 

CHAPTER 8

대화로 만드는 웹페이지 — HTML, CSS, JavaScript를 몰라도 괜찮아

 

"웹페이지는 복잡한 기술이 아니라, 이야기를 구조화하고 표현하는 예술이다. AI의 도움으로, 누구나 자신의 이야기를 웹페이지로 표현할 수 있다."

 

 

8.1 웹페이지 기본 구조 3분 이해

웹페이지를 이해하는 가장 쉬운 방법은 그것을 일반 문서처럼 생각하는 것이다. 당신이 읽는 책이나 신문을 생각해 보자. 그것들도 구조가 있다. 제목이 있고, 본문이 있고, 그림이 있고, 주석이 있다. 웹페이지도 정확히 같다. 다만, 상호작용이 추가되었을 뿐이다.

웹페이지를 만드는 데 사용되는 세 가지 기본 기술이 있다. HTML은 구조를 정의한다. CSS는 모양을 정의한다. JavaScript는 행동을 정의한다. 이 세 가지를 조합하면, 놀라운 웹페이지가 만들어진다.

HTML: 구조를 정의하는 언어

HTML은 HyperText Markup Language의 약자이다. 그것은 단순하지만 강력한 언어이다. HTML은 태그(tag)라고 불리는 명령어들로 이루어져 있다. 예를 들어, <h1>은 가장 큰 제목을 의미한다. <p>는 단락을 의미한다. <img>는 이미지를 삽입한다.

HTML은 인간이 읽을 수 있는 형식으로 작성된다. 다음은 간단한 HTML 예제이다: <h1>나의 포트폴리오</h1> <p>저는 그래픽 디자이너입니다.</p> <img src="photo.jpg" alt="나의 사진"> 이 코드는 "나의 포트폴리오"라는 제목을 표시하고, 그 아래에 설명 텍스트를 놓고, 사진을 삽입한다.

당신이 직접 이 코드를 작성할 필요는 없다. 하지만 개념을 이해하는 것은 중요하다. AI가 이 코드를 작성할 때, 당신은 그것이 어떻게 작동하는지 이해할 수 있기 때문이다.

CSS: 모양을 정의하는 언어

HTML이 구조를 정의한다면, CSS는 그 구조를 아름답게 만든다. CSS는 Cascading Style Sheets의 약자이다. CSS를 사용하면, 텍스트의 색상, 크기, 폰트, 배경색, 요소 간의 간격 등을 정의할 수 있다.

예를 들어, HTML에서 <p>라는 태그로 단락을 만들었다면, CSS에서는 이렇게 할 수 있다: "p 태그의 텍스트는 검정색이고, 폰트는 Arial이고, 크기는 16픽셀이다." 그러면 모든 단락이 동일한 스타일로 표시된다.

CSS의 가장 중요한 개념은 '선택자'와 '속성'이다. 선택자는 "어떤 요소에"를 정의하고, 속성은 "무엇을 어떻게"를 정의한다.

JavaScript: 행동을 정의하는 언어

HTML과 CSS는 정적이다. 즉, 한 번 정의되면 변하지 않는다. 하지만 JavaScript는 동적이다. 사용자의 행동에 반응한다. 예를 들어, 사용자가 버튼을 클릭하면, JavaScript는 그 클릭에 반응하여 뭔가를 한다. 이미지를 표시할 수도 있고, 텍스트를 숨길 수도 있고, 서버로 데이터를 보낼 수도 있다.

JavaScript는 상호작용을 가능하게 한다. 드롭다운 메뉴, 라이트박스 갤러리, 폼 검증, 실시간 알림 등은 모두 JavaScript로 만들어진다.

  💡 세 기술의 관계

  HTML은 건축의 구조, CSS는 인테리어 디자인, JavaScript는 가전제품과 같습니다. 구조 없이는 인테리어도 가전제품도 의미가 없고, 세 가지가 조화롭게 작동할 때 완전한 집이 완성됩니다.

 

8.2 첫 번째 페이지: 자기소개 사이트

이제 구체적으로 당신의 첫 번째 웹페이지를 만들어 보자. 가장 단순하면서도 효과적인 페이지는 자기소개 페이지이다. 이것은 당신이 누구인지, 무엇을 할 수 있는지를 간결하게 보여주는 페이지이다.

자기소개 페이지의 구조는 다음과 같을 수 있다. 최상단에는 네비게이션 메뉴가 있다. 그 아래에는 당신의 사진 또는 이름이 큰 글씨로 표시되는 '히어로' 섹션이 있다. 그 다음에는 당신의 소개 텍스트가 있다. 마지막으로 연락처 정보가 있다.

페이지 구성 계획

당신이 AI에게 "나는 그래픽 디자이너 포트폴리오 페이지를 만들고 싶어. 어떤 구조가 좋을까?"라고 물어보면, AI는 다음과 같은 구조를 제시할 수 있다.

1. 헤더: 로고와 네비게이션 메뉴. 2. 히어로 섹션: 당신의 사진 또는 배경 이미지와 짧은 소개. "나는 브랜드 정체성 디자인을 전문으로 하는 그래픽 디자이너입니다." 3. 소개 섹션: 당신의 경력, 교육, 기술. 4. 최근 프로젝트 섹션: 3-5개의 프로젝트를 그리드 형태로 표시. 5. 서비스 섹션: 당신이 제공하는 서비스들을 설명. 6. 연락처: 이메일, 전화, 소셜 미디어 링크. 7. 푸터: 저작권 정보 및 추가 링크.

이 구조는 매우 표준적이지만, 당신의 필요에 따라 수정할 수 있다. 예를 들어, 당신이 블로그 포스트를 자주 작성한다면, 최근 블로그 포스트 섹션을 추가할 수 있다.

콘텐츠 작성 가이드

페이지 구조가 정해지면, 각 섹션에 들어갈 콘텐츠를 작성해야 한다. 이것도 AI와 함께 할 수 있다. AI에게 "내 포트폴리오 페이지의 히어로 섹션에 들어갈 한 줄 설명을 만들어 줄 수 있어? 내 타겟은 소기업의 마케팅팀이야"라고 요청하면, AI는 당신의 타겟을 고려한 설명을 작성해 줄 것이다.

콘텐츠 작성 시 주의할 점은 간결함이다. 방문자가 당신의 페이지에 머무는 평균 시간은 매우 짧다. 따라서 불필요한 정보는 제거하고, 가장 중요한 정보만 남겨야 한다. 이것을 '콘텐츠 최적화'라고 한다.

  💡 효과적인 콘텐츠 작성

  1. 한 문장을 너무 길게 쓰지 마세요. 2. 복잡한 용어 대신 쉬운 말을 사용하세요. 3. 수치와 통계를 사용해서 신뢰성을 높이세요. 4. 활동적인 동사를 사용하세요. (예: "디자인했다" vs "디자인이 있다")

 

8.3 디자인 요청하기 (색상/폰트/레이아웃)

웹페이지의 구조와 콘텐츠가 준비되었다면, 이제 디자인 결정을 해야 한다. 색상, 폰트, 레이아웃, 여백, 버튼의 스타일 등이 모두 포함된다. 이 결정들이 당신의 웹페이지의 '느낌'을 만든다.

당신이 전문 디자이너가 아니더라도, 좋은 디자인 결정을 내릴 수 있다. AI와 협력하면 된다. AI에게 "나는 세련되고 전문적인 분위기의 포트폴리오 사이트를 만들고 싶어. 어떤 색상과 폰트가 좋을까?"라고 물어보면, AI는 구체적인 제안을 할 것이다.

색상 선택

색상은 웹페이지의 정체성을 결정한다. 색상은 감정을 전달한다. 파란색은 신뢰와 전문성을 나타낸다. 주황색은 에너지와 창의성을 나타낸다. 검정색은 우아함과 세련됨을 나타낸다.

당신이 선택해야 할 색상은 두 가지가 있다. 주 색상(primary color)과 보조 색상(secondary color)이다. 주 색상은 당신의 브랜드를 가장 잘 나타내는 색이고, 보조 색상은 주 색상을 돋보이게 하는 색이다. 예를 들어, 주 색상이 파란색이라면, 보조 색상은 하늘색이나 회색일 수 있다.

AI에게 "나는 기술 기업의 CEO인데, 신뢰감과 현대성을 나타내는 색 조합을 추천해 줄 수 있어?"라고 물어보면, AI는 "주 색상으로는 진한 파란색(#0066CC), 보조 색상으로는 밝은 주황색(#FF9500)이 좋습니다"라는 식의 구체적인 추천을 할 것이다.

폰트 선택

폰트는 텍스트의 '목소리'이다. 같은 텍스트도 폰트에 따라 완전히 다르게 느껴질 수 있다. 폰트는 크게 두 가지로 나뉜다. 세리프 폰트(serif font)는 글자 끝에 작은 장식이 있어 전통적이고 우아한 느낌을 준다. 산세리프 폰트(sans-serif font)는 장식이 없어 현대적이고 깔끔한 느낌을 준다.

웹에서는 주로 산세리프 폰트를 사용한다. 왜냐하면 화면에서 더 읽기 쉽기 때문이다. 인기 있는 산세리프 웹 폰트로는 Arial, Helvetica, Verdana, Open Sans 등이 있다.

한글 폰트의 경우, "나눔 고딕", "맑은 고딕", "Noto Sans KR" 등이 인기가 있다. 이 폰트들은 모두 웹에서 무료로 사용할 수 있다.

폰트 선택 시 주의할 점은 일관성이다. 너무 많은 서로 다른 폰트를 사용하면 페이지가 혼란스러워 보인다. 일반적으로 제목용 폰트 하나, 본문용 폰트 하나, 그리고 필요하면 강조용 폰트 하나를 선택하는 것이 좋다.

레이아웃과 여백

레이아웃은 페이지의 구조를 결정한다. 요소들을 어디에 배치할 것인가? 여백은 얼마나 줄 것인가? 이러한 결정들이 페이지의 가독성과 시각적 흐름에 큰 영향을 미친다.

좋은 레이아웃의 핵심 원칙은 '균형'과 '위계'이다. 균형은 시각적으로 안정감 있게 만들고, 위계는 어떤 정보가 더 중요한지를 명확하게 한다. 예를 들어, 중요한 정보는 크게 표시하고, 부수적인 정보는 작게 표시한다.

AI에게 "포트폴리오 사이트의 레이아웃을 어떻게 구성하면 좋을까? 사용자가 자연스럽게 프로젝트들을 찾을 수 있도록"이라고 물어보면, AI는 구체적인 레이아웃 제안을 할 것이다.

  💡 디자인 결정의 일관성

  모든 디자인 결정이 당신의 브랜드 정체성과 일치하는지 확인하세요. 예를 들어, 당신이 '창의적이고 현대적'이라는 정체성을 원한다면, 색상, 폰트, 레이아웃 모두 그것을 반영해야 합니다.

 

8.4 반응형 디자인: 모바일에서도 예쁘게

오늘날 웹 사용의 절반 이상이 모바일 기기에서 이루어진다. 따라서 모바일에서 당신의 웹사이트가 어떻게 보이는지가 매우 중요하다. 반응형 디자인은 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에 자동으로 적응하는 디자인을 의미한다.

반응형 디자인 없이 웹사이트를 만들면, 모바일 사용자들은 페이지를 옆으로 스크롤해야 하고, 텍스트가 너무 작아서 읽을 수 없을 것이다. 이는 매우 좋지 않은 사용자 경험이다.

반응형 디자인의 원칙

반응형 디자인은 세 가지 원칙을 따른다. 첫째, 유동형 레이아웃(fluid layout)이다. 페이지의 너비가 고정된 픽셀이 아니라, 화면 크기의 백분율로 설정된다. 둘째, 유동형 이미지(fluid image)이다. 이미지도 화면 크기에 따라 크기가 조정된다. 셋째, 미디어 쿼리(media query)이다. 특정 화면 크기에서만 다른 스타일을 적용한다.

예를 들어, 데스크톱에서는 포트폴리오 항목을 3개씩 한 줄에 표시하고, 태블릿에서는 2개씩, 모바일에서는 1개씩 표시할 수 있다. 이는 각 화면 크기에서 최상의 사용자 경험을 제공하기 위함이다.

모바일 우선 디자인

요즘의 웹 디자인 트렌드는 '모바일 우선(mobile-first)' 접근이다. 이는 가장 작은 화면(모바일)부터 디자인을 시작하고, 그 다음에 더 큰 화면으로 확대해 나가는 방식이다. 왜일까? 모바일에서는 본질적인 기능과 콘텐츠만 집중할 수 있고, 데스크톱에서는 추가적인 기능을 더할 수 있기 때문이다.

AI에게 "내 포트폴리오 사이트를 모바일 우선으로 디자인해 줄 수 있어?"라고 물어보면, AI는 모바일 화면에서 최적화된 디자인부터 시작해서, 데스크톱까지 확장하는 방식으로 설계할 것이다.

  💡 반응형 디자인 테스트

  당신의 웹사이트를 다양한 기기에서 테스트하세요. 크롬 브라우저의 개발자 도구(F12)를 사용하면, 컴퓨터에서 모바일 화면을 시뮬레이션할 수 있습니다. 아이폰, 아이패드, 삼성 갤럭시 등 다양한 기기의 화면 크기를 테스트해 보세요.

 

8.5 여러 페이지 연결: 네비게이션

포트폴리오 사이트가 홈페이지만으로는 부족할 수 있다. 각 프로젝트에 대한 상세 페이지가 필요할 수 있고, 블로그 페이지가 필요할 수도 있다. 여러 페이지가 있을 때, 사용자가 쉽게 이동할 수 있어야 한다. 이것이 네비게이션의 역할이다.

네비게이션은 사용자가 웹사이트 내에서 길을 잃지 않도록 도와주는 도구이다. 좋은 네비게이션은 사용자가 원하는 페이지를 빠르고 쉽게 찾을 수 있게 한다.

네비게이션 메뉴 디자인

네비게이션 메뉴의 가장 일반적인 형태는 페이지 상단의 가로 메뉴이다. 예를 들어, "홈 | 포트폴리오 | 소개 | 연락처"와 같은 형태이다. 이것은 사용자에게 직관적이고, 일관성이 있다.

모바일에서는 가로 메뉴가 공간을 많이 차지하기 때문에, '햄버거 메뉴'를 사용한다. 이는 세 개의 가로 줄로 된 아이콘으로, 클릭하면 메뉴가 펼쳐진다. 데스크톱에서도 많은 사이트에서 햄버거 메뉴를 사용한다.

내부 링크와 외부 링크

네비게이션에는 두 가지 종류의 링크가 있다. 내부 링크는 같은 웹사이트 내의 다른 페이지로 가는 링크이다. 외부 링크는 다른 웹사이트로 가는 링크이다.

내부 링크를 만들 때는 각 페이지에 고유한 URL을 지정해야 한다. 예를 들어, 당신의 포트폴리오 사이트의 URL이 "www.myportfolio.com"이라면, 포트폴리오 페이지의 URL은 "www.myportfolio.com/portfolio"가 될 수 있다.

외부 링크는 당신의 소셜 미디어 프로필이나 GitHub 링크 등이 될 수 있다. 외부 링크는 보통 새로운 탭에서 열리도록 설정한다. 이렇게 하면 방문자가 당신의 웹사이트에서 벗어나지 않는다.

현재 페이지 표시

사용자가 현재 어느 페이지에 있는지 알 수 있게 하는 것도 중요하다. 네비게이션 메뉴에서 현재 페이지의 링크를 다른 색상으로 표시하거나 굵게 표시할 수 있다.

  💡 네비게이션 모범 사례

  1. 네비게이션은 일관되어야 합니다. 모든 페이지에서 같은 위치에 있어야 해요. 2. 메뉴 항목은 5-7개 정도가 적당합니다. 너무 많으면 사용자가 혼란스러워해요. 3. 각 메뉴 항목의 텍스트는 명확해야 합니다. "기타" 같은 모호한 이름은 피하세요.

 

8.6 애니메이션과 인터랙션

애니메이션과 인터랙션은 웹사이트를 더 생생하고 매력적으로 만든다. 하지만 과하면 오히려 방해가 된다. "덜 하면 더 하는 것"이라는 원칙을 따라야 한다.

애니메이션의 목적은 크게 두 가지이다. 첫째, 주의를 끌기 위해서이다. 중요한 정보나 버튼을 강조할 때 사용한다. 둘째, 피드백을 주기 위해서이다. 사용자가 버튼을 클릭했을 때, 그것이 정상적으로 작동했다는 것을 보여주기 위해 사용한다.

일반적인 애니메이션 예제들

1. 마우스 호버 효과: 마우스를 버튼 위에 올리면, 버튼의 색상이 바뀌거나 크기가 커진다. 이는 사용자에게 "이것은 클릭할 수 있는 것이다"라고 알려준다.

2. 페이드 인/아웃: 요소가 천천히 나타나거나 사라진다. 이는 페이지 로드 시에 사용되거나, 요소가 숨겨질 때 사용된다.

3. 슬라이드 인: 요소가 옆에서 밀려 들어온다. 이는 새로운 콘텐츠를 소개할 때 효과적이다.

4. 스케일 변화: 요소의 크기가 변한다. 이는 중요한 정보를 강조할 때 사용된다.

인터랙션 설계

인터랙션은 사용자의 액션에 대한 시스템의 반응이다. 예를 들어, 사용자가 폼을 작성할 때, 각 필드가 올바르게 채워졌는지를 실시간으로 검증할 수 있다. 또는 사용자가 스크롤할 때, 특정 요소가 나타나도록 할 수 있다.

인터랙션 설계의 핵심은 사용자의 의도를 예측하고, 그에 맞는 반응을 제공하는 것이다. AI에게 "내 포트폴리오 사이트에 어떤 인터랙션을 추가하면 좋을까?"라고 물어보면, AI는 사용자 경험을 개선할 수 있는 인터랙션을 제안할 것이다.

  💡 애니메이션 원칙

  1. 목적을 명확히 하세요. 애니메이션이 필요한가요? 2. 빨리하세요. 애니메이션은 0.3-0.5초 정도가 좋습니다. 3. 일관성 있게 하세요. 같은 종류의 애니메이션은 같은 속도와 스타일을 사용하세요.

 

8.7 코드를 이해하지 않아도 되는 이유/하지만 이해하면 좋은 이유

당신은 이 책의 제목에서 "HTML, CSS, JavaScript를 몰라도 괜찮아"라고 봤을 것이다. 이것은 사실이다. 당신은 코드를 직접 작성할 필요가 없다. AI가 해줄 것이다. 하지만 코드를 이해한다면, 당신의 웹사이트를 더 잘 제어할 수 있고, 더 효율적으로 AI와 협력할 수 있다.

코드를 이해하지 않아도 되는 이유

첫째, 전문성의 문제이다. 웹 개발자가 되기 위해서는 수년의 학습이 필요하다. 당신이 모든 것을 배우려고 하면, 프로젝트를 완성할 수 없을 것이다. 둘째, 효율성의 문제이다. AI가 코드를 작성하는 것이 당신이 배워서 작성하는 것보다 훨씬 빠르다. 셋째, 실수의 가능성이다. 당신이 코드를 잘못 작성할 수 있지만, AI는 문법 오류를 만들지 않는다.

따라서 당신의 핵심 역할은 '기획자'와 '디렉터'이다. 당신은 무엇을 만들 것인지를 결정하고, 그것이 올바르게 만들어지는지 감시한다. 코드의 세세한 부분은 AI에게 맡긴다.

하지만 이해하면 좋은 이유

코드를 약간 이해하면 도움이 되는 경우들이 있다. 첫째, AI의 제안을 평가할 수 있다. AI가 "이 부분은 반응형 CSS 미디어 쿼리를 사용해야 해요"라고 제안할 때, 당신이 미디어 쿼리의 기본 개념을 이해하면, 그 제안의 타당성을 판단할 수 있다.

둘째, 더 정확한 요청을 할 수 있다. "이 버튼을 더 크게 해 줄 수 있어?"라고 말하는 것보다, "이 버튼의 CSS 크기를 16px에서 20px로 변경해 줄 수 있어?"라고 말하는 것이 더 정확하다.

셋째, 문제 해결이 빠르다. 만약 무언가 작동하지 않을 때, 코드의 어느 부분에 문제가 있을 가능성이 높은지 알 수 있다. 이는 AI에게 더 나은 질문을 할 수 있게 해준다.

넷째, 학습의 즐거움이다. 당신의 웹사이트가 어떻게 작동하는지 이해하는 것은 성취감을 준다. 또한, 향후에 독립적으로 작은 수정을 할 수 있게 된다.

기본 코드 개념 이해하기

당신이 이해해야 할 가장 기본적인 개념들을 소개하겠다. 변수(variable)는 값을 저장하는 상자이다. 함수(function)는 특정 작업을 수행하는 코드 블록이다. 루프(loop)는 반복적인 작업을 수행한다. 조건문(if statement)은 특정 조건에 따라 다른 코드를 실행한다.

예를 들어, "사용자가 클릭했으면 숨겨진 메뉴를 표시한다"는 인터랙션을 구현하려면, 조건문과 함수가 필요하다. 조건문은 "사용자가 클릭했는가?"를 확인하고, 함수는 "메뉴를 표시한다"는 작업을 수행한다.

  💡 코드 학습 팁

  당신이 AI가 작성한 코드를 보면, 각 부분이 무엇을 하는지 물어보세요. "이 줄은 뭐야?"라고 물어보면, AI는 설명해 줄 것입니다. 이렇게 점진적으로 학습하는 것이 가장 효과적입니다.

 

8.8 이 장을 마치며

이 장에서 우리는 웹페이지를 실제로 만드는 과정을 살펴봤다. HTML, CSS, JavaScript의 기본 개념, 페이지 구조 설계, 콘텐츠 작성, 디자인 결정, 반응형 디자인, 네비게이션, 애니메이션 등이 모두 포함되었다.

가장 중요한 메시지는 이것이다. 당신은 모든 것을 이해할 필요가 없다. 하지만 기본 개념을 이해하면, 당신의 웹사이트를 더 잘 제어할 수 있고, AI와 더 효율적으로 협력할 수 있다. 당신은 기획자이고 디렉터이고, AI는 당신의 기술 담당자이다.

이제 당신의 웹사이트의 설계와 개발이 완료되었다. 다음 단계는 그것을 세상에 공개하는 것이다. 이것이 배포(deployment)이고, 다음 장의 주제이다.

 

직접 해보기

1. 당신의 자기소개 페이지의 구조를 종이에 그려보세요. 각 섹션을 박스로 표현하고, 각 박스 안에 들어갈 콘텐츠를 메모하세요.

2. AI에게 당신의 포트폴리오 페이지를 위한 색상 조합을 제안해 달라고 요청하세요. "나는 [직업]인데, [특징]을 나타내는 색 조합을 추천해 줄 수 있어?"라고 물어보세요.

3. 당신의 페이지에 필요한 폰트를 선택하세요. 한글 폰트와 영문 폰트를 각각 하나씩 선택하고, 그것이 왜 좋은 선택이라고 생각하는지 이유를 적으세요.

4. 모바일에서 당신의 웹사이트가 어떻게 보일지 스케치해 보세요. 데스크톱 버전과 비교해서, 어떤 요소들이 숨겨지거나 재배치되어야 할지 생각해 보세요.

5. 당신의 웹사이트에 필요한 애니메이션이나 인터랙션을 3개 이상 나열해 보세요. 각각이 어떤 목적을 가지고 있는지 설명하세요.

6. AI에게 당신의 홈페이지 HTML 코드를 요청하세요. 받은 코드를 읽으면서, 각 부분이 무엇을 의미하는지 이해하려고 노력하세요. 모르는 부분은 AI에게 물어보세요.