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

창업플래너 2025. 8. 20.

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

“웹 개발은 개발자만의 영역이다?”
스타트업에서 사업개발(Business Development, 이하 BD) 역할을 수행하다 보면

이 말이 얼마나 틀린 이야기인지 곧 깨닫게 됩니다.

제품 팀, 마케팅 팀, 클라이언트와 협업하는 순간,

웹 기술에 대한 기초 지식이 커뮤니케이션의 필수 언어로 작동합니다.

특히, CSS, JavaScript, jQuery, CSS 선택자는 실제 실무에서 자주 마주하는 기술이자,

BD가 반드시 이해해야 할 핵심 영역입니다.

이 글은 비개발자 BD가 실무에서 바로 활용할 수 있는 웹 개발 기초 지식을 자세히 설명하고,
BD가 왜 이런 지식이 필요한지,

어떻게 습득해야 하는지를 단계별로 안내하는 실전형 가이드입니다.

1. 스타트업 BD에게 왜 웹 개발 지식이 필요한가?

스타트업에서 BD는 단순히 영업만 담당하지 않습니다.
제품 피드백 수집, 데이터 기반 분석, API 협의, 파트너사 기술 대응 등 다양한 업무를 수행합니다.

💡 다음과 같은 상황에서 웹 개발 지식이 빛을 발합니다:

디자이너와 함께 LP(랜딩페이지)를 기획하며 사용자 동선과 배치 구조 논의
마케터와 함께 A/B 테스트를 기획하며 CTA 버튼에 클릭 이벤트 삽입
개발자와 함께 제안서나 기능 정의서를 검토하며 기술적 가능성 판단
클라이언트에게 서비스 구조를 설명하며 프론트엔드/백엔드 차이를 이해

즉, 웹 개발 기초 지식은 BD의 실무 민첩성과 설득력을 강화해 주는 도구입니다.

2. CSS 심화: 구조와 스타일을 내 것으로 만들기

CSS(Cascading Style Sheets)는 웹 페이지의 시각적 표현을 담당하는 언어입니다.
"어떤 요소가 어디에, 어떻게 보이게 할 것인가?"를 결정합니다.

2-1. 박스 모델(Box Model)

모든 HTML 요소는 하나의 박스입니다.
이 박스는 다음 네 가지 영역으로 구성됩니다:

[Margin]
  [Border]
    [Padding]
      [Content]

Content: 텍스트, 이미지 등 실제 내용
Padding: 콘텐츠와 테두리 사이 공간
Border: 테두리
Margin: 다른 요소와의 외부 여백

📌 예시:

.box {
  padding: 10px;
  margin: 20px;
  border: 1px solid #000;
}

이 개념을 이해하면, 엘리먼트 간 간격 문제를 스스로 해결할 수 있습니다.

2-2. Flexbox 레이아웃

스타트업에서 사용하는 대부분의 웹페이지는 Flexbox 기반 레이아웃을 사용합니다.
Flex는 요소를 가로 정렬, 세로 정렬, 정렬 간격 조정 등 다양한 형태로 배치할 수 있게 해줍니다.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

주요 속성

justify-content: 주축 정렬 (왼쪽, 가운데, 사이 등)
align-items: 교차축 정렬 (위, 아래 중앙 등)
flex-wrap: 줄 바꿈 여부 설정

2-3. Position 속성

.item {
  position: absolute;
  top: 10px;
  left: 20px;
}

속성	설명
static	기본 위치 (기본값)
relative	기준 위치에서 이동 가능
absolute	부모 기준으로 절대 위치 지정
fixed	화면 기준 고정 (스크롤에도 유지됨)

3. JavaScript와 jQuery: 사용자 동작을 설계하다

3-1. JavaScript 기초

JavaScript는 웹의 동작과 로직을 담당하는 프로그래밍 언어입니다.
웹페이지를 동적으로 만들기 위해 꼭 필요합니다.

예: 버튼 클릭 시 알림을 띄우는 간단한 코드

document.getElementById("btn").addEventListener("click", function(){
  alert("버튼이 클릭되었습니다!");
});

3-2. jQuery 기초

jQuery는 JavaScript를 간단하게 쓸 수 있도록 만들어진 라이브러리입니다.
특히 B2B 솔루션, 관리자 페이지, 레거시 시스템에서 여전히 자주 사용됩니다.

$("#btn").click(function(){
  alert("클릭됨!");
});

jQuery의 장점

문법이 간결하고 이해하기 쉬움
크로스 브라우징 대응이 쉬움
DOM 조작이 간편함

✅ BD 입장에서는 기능 테스트용 스크립트를 빠르게 작성하거나,
마케터와의 협업에서 이벤트 삽입 포인트를 이해하는 데 유용합니다.

4. CSS 선택자: 스타일을 정확히 지정하는 기술

웹 페이지에서 원하는 요소에만 스타일을 적용하려면 CSS 선택자를 정확히 사용해야 합니다.

주요 선택자

선택자	설명	예시
*	모든 요소	* {margin:0;}
#id	특정 id 선택	#header {}
.class	특정 클래스 선택	.highlight {}
element	태그 선택	p {font-size:14px;}
div > p	자식 선택자	div > p {}
a:hover	마우스 올렸을 때	a:hover {color:blue;}

실무 예시:

.btn-login: 로그인 버튼 스타일 지정
#main-content: 페이지 본문 전체 스타일링
ul li:first-child: 첫 번째 리스트 항목에만 스타일 지정

📎 참고 문서: CSS 선택자 완전 정리 (MDN)

5. 실무에서 BD가 웹 개발 지식을 활용하는 순간

1️⃣ 클라이언트와의 기술 미팅

기술용어에 대한 이해와 응답이 가능
요구 기능에 대한 구현 난이도를 가늠 가능

2️⃣ 랜딩 페이지 피드백

구조 파악 후 콘텐츠 요소 제안
마케팅 툴 삽입 위치 제안 가능 (GA, 픽셀 등)

3️⃣ 제안서/견적서 작성

웹 개발 리소스 예측 가능
페이지 구성 시 필요한 기술 스택 논의 가능

❓ 자주 묻는 질문 (Q&A)

Q1. BD가 실제 코딩까지 할 필요가 있나요?

A. 코딩 자체보다는 읽고 이해하고 소통할 수 있는 능력이 중요합니다. 그러나 간단한 HTML/CSS 수정을 직접 할 수 있다면 큰 경쟁력이 됩니다.