[강의노트] KDT_day14_260123
프로젝트 WBS, 생성형 AI 활용, 바이브 코딩
프로젝트
1. WBS (Work Breakdown Structure)
2. 일정표
3. Role Assignment
- Role & Responsibility
4. Role 별로 어떤 skill set이 필요한가?
WBS
Work 해야 할 일
Breakdown 쪼갠다
Structure 체계적으로 정리
프로젝트 전체 -> 큰 작업 -> 세부 작업 -> "실행 가능한 최소 단위(Task)"
생성형 AI 활용
LLM = Large Language Model (대규모 언어 모델)
사람이 쓰는 언어를 이해하고, 예측하고, 만들어내는 AI 모델
프롬프트 엔지니어링
LLM이 원하는 답을 잘 내놓도록 질문(프롬프트)를 설계하는 기술
RAG = Retrieval-Augmented Generation (검색 증강 생성)
LLM이 답변하기 전에 '검색'을 먼저 하고, 그 결과를 근거로 답변을 생성하는 방식
Fine-tuning (파인 튜닝)
이미 학습된 LLM을, 특정 목적-도메인 데이터로 다시 학습시키는 것
예제 기반 프롬프트 기법
제로샷 프롬프트
예제 없이 작업을 수행하도록 지시
원샷 프롬프트
예제 하나를 제공한 후, 비슷한 작업을 지시
퓨샷 프롬프트
예제를 여러 개 제공한 후 작업을 수행하도록 지시
바이브 코딩
완벽할 설계보다 흐름과 감각을 타고 빠르게 코딩하는 방식
엄격한 설계-문서-아키텍쳐보다 지금 떠오른 아이디어, 감각(vibe), 몰입 상태를 우선해서 코드를 막 짜보는 스타일
Lovable으로 바이브 코딩해서 음력 달력 만들기
Lovable 바이브 코딩 화면질문에 따라 paln을 빌드하고 승인하면 어플을 자동으로 만들어준다.
https://lunar-notes-keeper.lovable.app -> 완성된 음력 달력 어플 링크
달력 화면은 잘 구현이 됐지만 음력 날짜는 엉터리다.웹 사이트 만들기
웹 페이지의 구조를 만드는 HTML
웹페이지 상에서 F12를 누르면 나오는 언어.
기본적으로 <Tag> 구조로 되어있다.
여는 태그와 닫는 태그가 한 쌍이다.
웹 페이지를 보기 좋게 꾸미는 CSS (Cascading Style Sheets)
HTML이 뼈대라면, CSS는 옷, 색감, 레이아웃, 애니메이션을 담당.
웹 페이지의 디자인과 레이아웃을 정의하는 스타일 언어
글자 색, 크기, 폰트, 배경 색, 이미지, 여백, 정렬, 배치, 반응형 디자인, 애니메이션, 전환 효과
CSS 기본 문법
선택자 : 누구를 꾸밀지
속성 : 무엇을 바꿀지
값 : 어떻게 바꿀지
웹페이지에 동작을 부여하는 자바스크립트
웹페이지의 동작을 부여하는 프로그래밍 언어
HTML이 구조, CSS가 디자인, JavaScript는 동작과 로직 담당
예시) 버튼 클릭 시 반응하기, 입력값 검사 (회원가입 폼), 팝업, 알림, 모달, 데이터 가져오기(API), 페이지 새로고침 없이 내용 변경, 애니메이션 제어, 게임, 차트, 지도, 웹앱
자바스크립트 기본 문법
변수 -> 조건 -> 반복 -> 함수 -> DOM
[본 글은 한국기술사업화진흥협회 대구지회에서 수강한 K-Digital Training 과정의 내용을 요약 정리한 개인 학습 노트입니다.]