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

창업플래너 2025. 8. 20.

BD 웹개발 실전가이드: jQuery와 Bootstrap으로 실무 대응력 키우기

스타트업에서 BD(Business Development)는 이제 단순한 사업개발의 역할을 넘어,
기획, 제품, 마케팅, 개발과의 접점을 이해하고 조율하는

‘하이브리드 포지션’으로 진화하고 있습니다.

이런 역할을 제대로 수행하려면, 웹 개발에 대한 기초 지식은 ‘선택’이 아니라 ‘필수’입니다.
특히 실무에서 많이 쓰이는 jQuery와 Bootstrap에 대한 이해는,

단순 이해를 넘어 BD의 실전 경쟁력을 결정합니다.

이 글에서는 개발자가 아니어도 실무에서 충분히 이해하고 적용할 수 있는

✅ jQuery 심화 기능,
✅ Bootstrap 템플릿 구조 활용법,
✅ Bootstrap 고급 레이아웃 및 컴포넌트 사용법을

비개발자 관점에서 하나씩 정리해 보겠습니다.

1. jQuery 심화: 개발자 없이 이벤트 제어하는 방법

1-1. 왜 jQuery를 알아야 할까?

많은 스타트업에서 사용하는 내부 시스템, 관리자 대시보드, B2B 서비스의 운영툴은
아직도 jQuery 기반으로 구성되어 있는 경우가 많습니다.

BD는 이런 시스템을 직접 개발하지 않더라도, UI 기능이나 동작을 제안하고 테스트할 수 있어야 하며,
마케터와 함께 이벤트 트래킹, 팝업 구성 등을 기획하는 경우에도 jQuery 지식이 매우 유용합니다.

1-2. DOM 조작 심화

HTML의 각 요소를 선택하고 내용을 바꾸거나 삭제하는 작업은 jQuery에서 매우 쉽습니다.

// 버튼 클릭 시 특정 텍스트 바꾸기
$("#btn-change").click(function() {
  $("#target-text").text("내용이 변경되었습니다!");
});

.text() : 텍스트만 바꿀 때
.html() : HTML 태그 포함 내용 변경
.val() : input, textarea의 값 읽기/쓰기
.append() : 요소 뒤에 내용 추가
.remove() : 요소 삭제

✅ BD가 기획한 UI를 개발자에게 설명할 때
→ “이 버튼을 누르면 아래 텍스트가 이렇게 바뀌면 좋겠어요”
→ 이 동작을 jQuery 코드 한 줄로도 설명 가능!

1-3. 이벤트 제어 심화

// input에 글자를 입력할 때마다 글자 수 표시
$("#input-message").on("input", function() {
  let len = $(this).val().length;
  $("#counter").text(len + "자 입력 중");
});

.click() : 클릭 이벤트
.hover() : 마우스 오버/아웃
.on('input') : 실시간 입력 감지
.keyup(), .keydown() : 키보드 이벤트

✅ 실전 예:

고객 제안용 페이지에서 CTA 클릭률 추적용 코드 작성
뉴스레터 구독 입력창에 실시간 유효성 검사 기능 적용

1-4. Ajax 요청 실습

Ajax는 페이지를 새로고침하지 않고 서버에 데이터를 요청하는 방식입니다.

$.ajax({
  url: "https://api.example.com/data",
  type: "GET",
  success: function(data) {
    $("#output").html(data.result);
  },
  error: function(err) {
    alert("데이터를 불러오지 못했습니다.");
  }
});

BD가 제안서나 서비스 기능 기획을 할 때,
**“어떤 데이터를 어떻게 받아와야 하는지”**에 대한 이해도가 생기면,
기획자 또는 개발자와의 대화 정확도가 급격히 향상됩니다.

2. Bootstrap 템플릿 활용: 프로토타입의 핵심 도구

2-1. Bootstrap이란?

Bootstrap은 디자인 감각이 없어도 완성도 있는 웹 UI를 만들 수 있도록 돕는 CSS 프레임워크입니다.
단 몇 줄의 코드만으로 반응형 웹 디자인을 구현할 수 있어
기획자, 디자이너, BD, 마케터 등 비개발 직군에게도 적극 권장되는 툴입니다.

2-2. 무료 템플릿 사이트

BD가 Bootstrap을 가장 쉽게 접하는 방법은 템플릿 사용입니다.

템플릿 활용 예시:

<div class="container mt-5">
  <h1 class="text-center">우리 서비스 소개</h1>
  <p class="lead text-center text-muted">스타트업을 위한 빠른 솔루션</p>
</div>

.container : 콘텐츠를 가운데 정렬
.text-center : 가운데 정렬
.lead : 중요한 소개 문구에 적용
.mt-5 : 여백 설정

이런 클래스를 이해하고 조합할 줄 안다면, BD가 직접 디자인 시안 없이 웹 프로토타입을 제안할 수 있습니다.

2-3. 실무 활용 예

상황	Bootstrap 템플릿 적용 예
LP 기획안 작성	템플릿 구조 사용해 랜딩 페이지 시안 제공
행사 페이지 제안	Countdown Timer 포함된 템플릿 활용
설문지 or 대시보드 구성	카드형 UI 템플릿 구조 활용

3. Bootstrap 심화: 커스터마이징 & 고급 활용

Bootstrap은 단순 템플릿 이상의 도구입니다. 스타일 재정의, 컴포넌트 확장도 가능합니다.

3-1. 그리드 시스템 완전 이해

Bootstrap은 12단 그리드 기반입니다. 이를 응용하면 다양한 레이아웃을 쉽게 설계할 수 있습니다.

<div class="row">
  <div class="col-md-6">왼쪽 영역</div>
  <div class="col-md-6">오른쪽 영역</div>
</div>

클래스	설명
.row	가로 행 구성
.col-6	12칸 중 6칸 사용 (50%)
.col-md-4	중간 화면 이상에서 4칸 사용

✅ 반응형 웹에 최적화되어 있어 모바일/PC에서 자동 배치 조절

3-2. 주요 컴포넌트 활용

컴포넌트	설명	예시 클래스
버튼	사용자 행동 유도	.btn, .btn-primary
카드	콘텐츠 박스 구성	.card, .card-body
네비게이션바	상단 메뉴	.navbar, .navbar-brand
모달	팝업창 구성	.modal, .modal-content

<button class="btn btn-success">문의하기</button>

✅ BD가 만든 LP에서 "문의하기" 버튼 클릭 시, 모달 팝업으로 설문 삽입

3-3. 커스터마이징 실습

기존 Bootstrap 스타일은 CSS로 쉽게 오버라이드 가능합니다.

.btn-success {
  background-color: #28a745;
  border-radius: 10px;
  font-weight: bold;
}

CI에 맞춘 색상 변경
버튼 모양, 폰트 수정
각종 컴포넌트에 개별 스타일 적용

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

Q1. jQuery와 Bootstrap, 지금도 배울 가치가 있나요?

A. 네. 스타트업 실무에서 여전히 활용되고 있으며, 배우기 쉽고 빠르게 프로토타이핑 가능한 장점이 있습니다. 특히 BD나 기획 직무에선 매우 유용합니다.

Q2. BD가 직접 템플릿을 수정하려면 어떤 툴이 필요하나요?

A. VS Code 같은 코드 에디터와 웹 브라우저만 있으면 충분합니다. FTP나 GitHub을 연동하면 개발자와도 협업이 쉬워집니다.

Q3. 실무 적용이 어렵다면 어떤 방법으로 학습할 수 있을까요?

🔗 참고 링크

이상으로 BD가 꼭 알아야 할 jQuery와 Bootstrap 웹개발 기초를 실전 관점에서 정리했습니다.