스타트업 BD를 위한 웹 개발 기초와 지식 1일차

스타트업 BD를 위한 웹 개발 기초와 지식 💻

스타트업에서 Business Development(BD) 업무를 담당하는 분들에게

웹 개발의 기본 지식은 매우 중요한 자산입니다.

개발팀과의 원활한 소통, 현실적인 제안 작성,

그리고 고객에게 더 정확한 설명을 할 수 있는 기반이 됩니다.

비개발자도 쉽게 이해할 수 있는 웹 개발의 기초 개념부터

실제로 간단한 웹페이지를 만들어보는 실습까지 진행해 보겠습니다.

1. 소스 코드란? 📄

소스 코드의 정의

소스 코드(Source Code)는 프로그래머가 프로그래밍 언어로 작성한 텍스트 파일입니다.

쉽게 말해, 컴퓨터에게 "이렇게 동작해라"라고 알려주는 명령어들의 집합입니다.

웹 개발에서의 소스 코드 종류

HTML (HyperText Markup Language)

역할: 웹페이지의 구조와 내용을 정의
비유: 건물의 뼈대와 같은 역할
예시: 제목, 문단, 이미지, 링크 등을 배치

<h1>제목입니다</h1>
<p>이것은 문단입니다.</p>

CSS (Cascading Style Sheets)

역할: 웹페이지의 디자인과 레이아웃을 담당
비유: 건물의 인테리어와 외관 디자인
예시: 색상, 폰트, 크기, 위치 등을 지정

h1 {
    color: blue;
    font-size: 24px;
}

JavaScript

역할: 웹페이지에 동적인 기능을 추가
비유: 건물의 전자 시설 (엘리베이터, 자동문 등)
예시: 버튼 클릭, 애니메이션, 데이터 처리 등

function sayHello() {
    alert("안녕하세요!");
}

BD 관점에서 소스 코드 이해하기

1. 개발 공수 예측

HTML: 상대적으로 빠른 작업 (1-2일)
CSS: 디자인 복잡도에 따라 변동 (2-5일)
JavaScript: 기능 복잡도에 따라 크게 변동 (3-15일)

2. 유지보수 비용

코드가 많을수록 → 유지보수 비용 증가
복잡한 기능일수록 → 버그 발생 가능성 증가
코드 품질이 낮을수록 → 추후 수정 비용 증가

3. 확장성 고려사항

모듈화된 코드 → 새로운 기능 추가 용이
표준화된 코드 → 개발자 교체 시 리스크 감소
문서화된 코드 → 인수인계 및 협업 효율성 증대

2. 에디터 설치 및 HTML 기본 구조 🛠️

Node.js 개발 환경 구축

Node.js란?

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.

이를 통해 서버 사이드에서도 JavaScript를 실행할 수 있게 되어,

웹 개발에서 프론트엔드와 백엔드를 모두 JavaScript로 개발할 수 있습니다.

Node.js 설치 방법

공식 웹사이트 방문: https://nodejs.org/
LTS 버전 다운로드 (Long Term Support - 안정적인 버전)
설치 프로그램 실행
- Windows: .msi 설치 파일 실행
- macOS: .pkg 설치 파일 실행
- Linux: 패키지 매니저 사용 (sudo apt install nodejs npm)

설치 확인 방법

터미널 또는 명령 프롬프트에서 다음 명령어 실행:

node --version
npm --version

BD 관점에서 Node.js의 중요성

개발 비용 절감: 프론트엔드와 백엔드 개발자가 같은 언어 사용
빠른 개발: JavaScript 하나로 전체 웹 애플리케이션 개발 가능
풍부한 생태계: npm을 통한 수많은 라이브러리 활용
실시간 애플리케이션: 채팅, 알림 등 실시간 기능 구현에 최적화

Node.js 활용 사례

Netflix: 사용자 인터페이스 개발
LinkedIn: 모바일 앱 백엔드
Uber: 매칭 시스템 및 실시간 추적
WhatsApp: 메시징 서버 구축

HTML 기본 구조

기본 HTML 문서 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 첫 번째 웹페이지입니다.</p>
</body>
</html>

각 요소별 설명

DOCTYPE 선언

<!DOCTYPE html>

의미: "이 문서는 HTML5로 작성되었습니다"
중요성: 브라우저가 올바르게 해석할 수 있도록 도움

html 태그

<html lang="ko">

의미: HTML 문서의 시작과 끝을 알림
lang 속성: 문서의 주 언어 지정 (SEO 및 접근성에 중요)

head 섹션

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
</head>

역할: 페이지에 대한 정보 (메타데이터) 포함
charset: 문자 인코딩 방식 (한글 깨짐 방지)
viewport: 모바일 반응형 디자인을 위한 설정
title: 브라우저 탭에 표시되는 제목

body 섹션

<body>
    <h1>안녕하세요!</h1>
    <p>이것은 첫 번째 웹페이지입니다.</p>
</body>

역할: 실제로 화면에 표시되는 내용
h1: 가장 큰 제목 (h1~h6까지 사용 가능)
p: 문단 (paragraph)

Atom과 Node.js를 활용한 개발 환경 설정

1단계: Atom 설치 후 기본 설정

Atom 설치 완료 후 권장 패키지:
- emmet: HTML/CSS 빠른 작성
- atom-beautify: 코드 자동 정리
- minimap: 코드 미니맵 표시
- file-icons: 파일 아이콘 개선
- highlight-selected: 선택된 단어 하이라이트

2단계: Node.js 개발 환경 구축

# 1. Node.js 버전 확인
node --version
npm --version

# 2. 프로젝트 폴더 생성
mkdir my-startup-website
cd my-startup-website

# 3. npm 프로젝트 초기화
npm init -y

# 4. 개발 서버 패키지 설치
npm install --save-dev live-server

3단계: package.json 스크립트 설정

{
  "name": "my-startup-website",
  "version": "1.0.0",
  "scripts": {
    "start": "live-server",
    "dev": "live-server --port=3000"
  },
  "devDependencies": {
    "live-server": "^1.2.2"
  }
}

4단계: 실시간 미리보기 서버 실행

npm start

자동으로 브라우저가 열리고 http://localhost:8080에서 웹사이트 확인
파일 저장 시 자동으로 브라우저 새로고침

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>우리 스타트업 소개</title>
</head>
<body>
    <header>
        <h1>🚀 혁신적인 스타트업</h1>
        <nav>
            <ul>
                <li><a href="#about">회사 소개</a></li>
                <li><a href="#services">서비스</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>회사 소개</h2>
            <p>우리는 혁신적인 기술로 세상을 바꾸는 스타트업입니다.</p>
        </section>

        <section id="services">
            <h2>우리의 서비스</h2>
            <ul>
                <li>웹 개발</li>
                <li>모바일 앱 개발</li>
                <li>AI 솔루션</li>
            </ul>
        </section>

        <section id="contact">
            <h2>연락처</h2>
            <p>이메일: contact@startup.com</p>
            <p>전화: 02-1234-5678</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 혁신적인 스타트업. All rights reserved.</p>
#### 4단계: Node.js 개발 서버로 실시간 확인
1. **터미널에서 개발 서버 실행**:
```bash
npm start

자동으로 브라우저가 열리면서 실시간 미리보기 시작
- 주소: http://localhost:8080
- Atom에서 파일을 수정하고 저장할 때마다 자동으로 브라우저 새로고침
개발 서버의 장점:
- 실시간 반영: 코드 수정 시 즉시 확인 가능
- 모바일 테스트: 같은 네트워크의 모바일 기기에서도 접속 가능
- 개발 효율성: 매번 파일을 새로고침할 필요 없음

5단계: Atom의 유용한 단축키 활용

- Ctrl + Shift + D: 현재 줄 복사
- Ctrl + Shift + K: 현재 줄 삭제  
- Ctrl + /: 주석 토글
- Ctrl + D: 같은 단어 다중 선택
- Alt + Shift + 화살표: 줄 이동
- Ctrl + Enter: 아래 줄에 새 줄 생성

Node.js를 활용한 추가 개발 도구

개발 효율성을 높이는 npm 패키지들

1. Sass (CSS 전처리기)

npm install --save-dev node-sass

CSS를 더 효율적으로 작성할 수 있는 도구
변수, 중첩, 믹스인 등 고급 기능 제공

2. Prettier (코드 포맷터)

npm install --save-dev prettier

코드 스타일을 자동으로 정리
팀 개발 시 일관된 코드 스타일 유지

3. ESLint (코드 품질 검사)

npm install --save-dev eslint

JavaScript 코드의 오류를 미리 발견
코딩 컨벤션 준수 도움

package.json 스크립트 확장

{
  "scripts": {
    "start": "live-server",
    "dev": "live-server --port=3000",
    "build": "node build-script.js",
    "format": "prettier --write .",
    "lint": "eslint ."
  }
}

3. 웹 개발의 전체적인 이해 🌐

프론트엔드 vs 백엔드

프론트엔드 (Frontend)

정의: 사용자가 직접 보고 상호작용하는 부분
기술: HTML, CSS, JavaScript
비유: 레스토랑의 홀 (고객이 보는 공간)
개발 기간: 보통 2-8주
비용: 상대적으로 낮음

백엔드 (Backend)

정의: 서버에서 동작하는 보이지 않는 부분
기술: Python, Java, Node.js, 데이터베이스 등
비유: 레스토랑의 주방 (고객이 보지 못하는 곳)
개발 기간: 보통 4-16주
비용: 상대적으로 높음

웹 개발 프로세스

1. 기획 단계 (1-2주)

요구사항 분석
사용자 경험(UX) 설계
기능 명세서 작성
BD 역할: 고객 요구사항을 개발팀에 전달

2. 디자인 단계 (1-3주)

UI/UX 디자인
프로토타입 제작
디자인 시스템 구축
BD 역할: 고객 피드백 수집 및 전달

3. 개발 단계 (4-12주)

프론트엔드 개발
백엔드 개발
데이터베이스 구축
BD 역할: 진행 상황 모니터링 및 고객 커뮤니케이션

4. 테스트 단계 (1-2주)

기능 테스트
성능 테스트
사용자 테스트
BD 역할: 고객과 함께 최종 확인

5. 배포 및 유지보수

서버 배포
모니터링
버그 수정
기능 업데이트
BD 역할: 추가 요구사항 발굴 및 관리

개발 비용 예측 가이드

웹사이트 유형별 예상 비용

웹사이트 유형	개발 기간	예상 비용	주요 기능
단순 홈페이지	2-4주	300-800만원	정보 제공, 연락처
기업 웹사이트	4-8주	800-2000만원	CMS, 관리자 페이지
전자상거래	8-16주	2000-5000만원	결제, 재고관리, 주문관리
복합 플랫폼	16-24주	5000만원+	사용자 관리, 복잡한 비즈니스 로직

비용에 영향을 주는 요소

기능의 복잡성: 단순할수록 저렴
디자인 요구사항: 커스텀 디자인은 비용 증가
연동 시스템: 외부 API 연동 시 비용 증가
반응형 디자인: 모바일 최적화 비용
보안 요구사항: 고도의 보안 시 비용 증가

4. BD 업무에 활용할 수 있는 웹 개발 지식 💼

고객과의 커뮤니케이션 향상

기술적 용어를 쉽게 설명하기

❌ "RESTful API를 통한 JSON 데이터 통신이 필요합니다."
✅ "다른 시스템과 정보를 주고받을 수 있는 연결 통로가 필요합니다."

❌ "프론트엔드 프레임워크로 React를 사용하겠습니다."
✅ "사용자가 보는 화면을 효율적으로 만들 수 있는 도구를 사용하겠습니다."

개발 일정을 현실적으로 설명하기

단계별 설명 예시:
1. "먼저 어떤 기능이 필요한지 정리하는 시간이 1주일 필요합니다."
2. "그 다음 화면 디자인을 만드는데 2주일이 걸립니다."
3. "실제 프로그래밍 작업은 6주일 정도 예상됩니다."
4. "마지막으로 테스트와 수정에 1주일이 필요합니다."

제안서 작성 시 활용

기술 스택 제안 근거

## 추천 기술 스택

### 프론트엔드: React
- **장점**: 빠른 개발, 유지보수 용이
- **적용 사례**: Facebook, Netflix, Airbnb
- **고객 혜택**: 사용자 경험 향상, 빠른 로딩 속도

### 백엔드: Node.js
- **장점**: JavaScript 기반으로 개발 효율성 향상
- **적용 사례**: LinkedIn, Uber, PayPal
- **고객 혜택**: 개발 비용 절감, 빠른 출시

개발 단계별 산출물 명시

## 개발 단계별 산출물

### 1단계: 기획 (1주)
- 기능 명세서
- 사이트맵
- 와이어프레임

### 2단계: 디자인 (2주)
- UI 디자인 시안
- 스타일 가이드
- 프로토타입

### 3단계: 개발 (6주)
- 주간 데모 세션
- 개발 진행 보고서
- 중간 테스트 결과

개발팀과의 효과적인 소통

올바른 질문 방법

❌ "이거 언제 끝나요?"
✅ "현재 진행률이 어느 정도이고, 예상 완료일이 언제인가요?"

❌ "버그를 빨리 고쳐주세요."
✅ "이 버그가 사용자에게 미치는 영향도를 고려해서 우선순위를 정해주실 수 있나요?"

❌ "기능을 하나 더 추가해주세요."
✅ "이 기능 추가가 전체 일정과 비용에 어떤 영향을 줄까요?"

요구사항 전달 시 체크리스트

✅ 기능의 목적과 배경 설명
✅ 사용자 시나리오 제공
✅ 우선순위 명시
✅ 성공 기준 정의
✅ 예산 및 일정 제약사항 공유

경쟁사 분석 및 벤치마킹

기술적 관점에서 경쟁사 분석

## 경쟁사 A 분석

### 장점
- 모바일 최적화가 잘 되어 있음
- 로딩 속도가 빠름 (3초 이내)
- 사용자 인터페이스가 직관적

### 단점
- 구형 브라우저 지원 부족
- 검색 기능이 제한적
- 소셜 로그인 옵션 없음

### 기술적 특징
- React 기반 Single Page Application
- Progressive Web App 기술 적용
- CDN을 통한 전 세계 서비스 제공

리스크 관리

기술적 리스크 식별 및 대응

## 주요 리스크 및 대응 방안

### 개발 지연 리스크
- **원인**: 요구사항 변경, 기술적 난이도 과소평가
- **대응**: 단계별 마일스톤 설정, 변경 관리 프로세스 구축

### 성능 리스크
- **원인**: 대용량 데이터, 동시 사용자 증가
- **대응**: 성능 테스트, 확장 가능한 아키텍처 설계

### 보안 리스크
- **원인**: 개인정보 처리, 결제 시스템 연동
- **대응**: 보안 감사, 인증서 적용, 정기적 보안 업데이트

고객 교육 자료 준비

웹사이트 관리 가이드

## 웹사이트 관리자를 위한 가이드

### 일상적인 관리 작업
1. **콘텐츠 업데이트**
   - 새로운 글 작성 방법
   - 이미지 업로드 및 최적화
   - 메뉴 구조 변경

2. **사용자 관리**
   - 회원 가입 승인
   - 권한 설정
   - 문의사항 응답

3. **성능 모니터링**
   - 접속자 통계 확인
   - 로딩 속도 체크
   - 오류 로그 검토

이러한 웹 개발 기초 지식을 바탕으로 BD 업무의 전문성을 높이고,

고객과 개발팀 사이의 효과적인 커뮤니케이션 브릿지 역할을 수행할 수 있습니다.

지속적인 학습을 통해 기술 트렌드를 파악하고,

더 나은 솔루션을 제안할 수 있는 역량을 기르시기 바랍니다.