2026. 7. 28. 16:38ㆍAI 기반 프론트엔드 웹개발자 양성과정
[프로젝트 2일차] 주제 선정 · 회의록 시스템 미션
Git 전략 · 하네스 엔지니어링
2026.07.28 · 오전·오후 팀 회의 (주제 확정 → 협업 규칙·운영 방식 결정)
📋 오늘 다룬 것들
오늘은 프로젝트 주제를 확정하고, 그걸 어떻게 굴릴지 운영 방식까지 못 박은 날이었다. 오전엔 팀원 각자가 준비해 온 기획을 소개·투표해 주제를 골랐고, 오후엔 확정된 주제와 함께 주간 미션(회의록 시스템), Git 브랜치 전략, 그리고 프로젝트 운영에 하네스 엔지니어링을 도입하기로 했다. "무엇을 만들지"에서 "어떻게 같이 만들지"로 넘어가는 단계였다.
🗳 오전 회의 — 주제 선정
안건은 "주제 선정을 위한 팀원별 기획 소개". 각자 준비한 기획을 발표하고, 서로의 기획을 상세히 검토한 뒤 투표하기로 했다.
| 제안자 | 기획 주제 |
|---|---|
| 팀원 A | 실시간 이벤트 피드백 모니터링 서비스 |
| 팀원 B | 실시간 협업 여행 계획 서비스 |
| 팀장 | 반려동물 동반 여행 가이드 서비스 |
| 나 | AI 기반 감정 일기장 서비스 |
오전 액션 아이템
✅ 오후 회의 — 주제 확정
참석자 전원. 오전 검토·투표 결과, 주제는 「실시간 피드백 모니터링 서비스」(팀원 A 제안)로 확정됐다.
🧾 주간 미션 — 회의록 시스템
이번 주 미션은 "회의록 시스템". raw 회의록 마크다운을 넣으면 정해진 서식으로 정리해 주는 도구를 직접 만든다.
🌿 Github Repo & 브랜치 전략
# 브랜치 전략 main # 안정 버전 └ dev # 통합 개발 ├ feature/** # 기능 개발 └ refactor/** # 리팩토링 # main·dev 직접 병합 금지 → PR로만
🔧 환경 설정 — 하네스 엔지니어링 도입
프로젝트 운영 자체에 하네스 엔지니어링을 도입하기로 했다. 각자 하네스에 추가할 환경설정 항목을 검색·조사해 오고, 오후 15:30에 다시 모여 어떤 항목을 넣을지 결정한다.
📌 결정 사항 · 액션 아이템
| 결정 사항 |
|---|
| 주제: 실시간 피드백 모니터링 서비스 선정 |
| Repo: Organization Repo에서 fork 없이 멤버별 쓰기 권한 부여 |
브랜치 전략: main·dev + feature/**·refactor/** |
| PR 메시지에 이해 안 되는 부분 명시하는 하네스 엔지니어링 적용 |
| 프로젝트 운영에 하네스 엔지니어링 도입 |
🧑💻 오늘의 코드 리뷰 — label vs p (HTML 1일차)
7/28부터 매일 코드 리뷰가 시작됐다. 첫 주제는 "입력칸의 이름표는 <p>가 아니라 <label>로 붙인다". 겉으론 멀쩡한 회원가입 폼인데, "아이디" 글자를 눌러도 입력칸에 커서가 안 들어가는 게 문제였다.
❌ 문제 코드 (전체)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>회원가입</title> </head> <body> <h1>회원가입</h1> <form action="/signup" method="post"> <p>아이디</p> <!-- ❌ 이름표를 p 로 --> <input type="text" id="userId" name="userId" required> <p>비밀번호</p> <!-- ❌ 여기도 p --> <input type="password" id="userPw" name="userPw" required> <button type="submit">가입하기</button> </form> </body> </html>
✅ 정답 (수정 부분)
<!-- p → label 로, for 의 값은 input 의 id 와 같게 --> <label for="userId">아이디</label> <input type="text" id="userId" name="userId" required> <label for="userPw">비밀번호</label> <input type="password" id="userPw" name="userPw" required> <!-- for 의 값 = input 의 id (한 글자만 달라도 안 묶임) -->
label에 for를 쓰면 브라우저가 그 입력칸과 한 쌍으로 묶어준다. 그래서 ① 글자를 클릭하면 입력칸에 커서가 들어가고, ② 스크린리더가 "아이디, 입력"처럼 무슨 칸인지 읽어준다. for에 적는 값이 곧 입력칸의 id라, id가 필요했던 것.확인 방법
| 방법 | 문제(p) | 정답(label) |
|---|---|---|
| 글자 클릭 | 아무 일 없음 | 입력칸에 커서 들어옴 |
Console document.querySelector('#userId').labels.length | 0 (연결된 이름표 없음) | 1 (이름표와 묶임) |
| F12 → Accessibility → Name | 비어 있음 | "아이디" |
placeholder로 이름표를 대신하기(입력하면 사라져 무슨 칸인지 모름 → label 대체 불가), ② for에 name 값 적기(for는 id를 가리킨다, name 아님).✍️ 마치며
주제를 정하는 것보다 인상 깊었던 건, "AI로 짠 코드를 어떻게 우리 것으로 만드느냐"를 규칙으로 못 박은 부분이었다. PR에 이해 안 된 부분을 일부러 적는 하네스 방식은, 며칠 전 배운 개념이 실제 팀 워크플로로 살아나는 순간이라 반가웠다. 회의록 시스템 미션도 결국 우리가 배운 플러그인·MCP를 팀 도구로 만드는 일이라, 배운 게 곧바로 쓰인다는 게 좋았다. 내일은 각자 하네스 항목을 들고 와 운영 규칙을 확정한다 — 판이 점점 갖춰지고 있다.
🏷️ 포트폴리오 | 팀 프로젝트 | 주제선정 | Git 전략 | 하네스 엔지니어링 | 회의록
'AI 기반 프론트엔드 웹개발자 양성과정' 카테고리의 다른 글
| [260730 23일차] 프로젝트 #4 (0) | 2026.07.31 |
|---|---|
| [260729 22일차] 프로젝트 #3 (0) | 2026.07.30 |
| [260727 20일차] 프로젝트 #1 (0) | 2026.07.28 |
| [260724 19일차] Claude Code 심화 (0) | 2026.07.28 |
| [260723 18일차] Streamlit · Gradio · Claude Code (0) | 2026.07.23 |