[260730 23일차] 프로젝트 #4

2026. 7. 31. 08:53ㆍAI 기반 프론트엔드 웹개발자 양성과정

# 포트폴리오 학습일지

[프로젝트 4일차] 와이어프레임·디자인 시스템
+ Git 머지 정책 · 산출물 범위 확정

2026.07.30 · 개인 작업(디자인) + 오전·오후 팀 회의(산출물 범위·머지 정책)

📋 오늘 다룬 것들

오늘은 개인적으로 와이어프레임·디자인 시스템·컴포넌트 같은 화면 기반을 잡았고, 팀 회의에선 1주차 기획 산출물 범위와 코드 작성 시작일(8/3)을 확정했다. 오후엔 Git 머지 정책(Rebase vs Squash)과 PR 템플릿을 논의했는데, 머지 전략 용어가 헷갈려서 이참에 개념을 정리했다.

내 작업
와이어프레임디자인 시스템컴포넌트
도구
FigmaFigma→JSON
오전 회의
산출물 범위8/3 코드 시작
머지 정책
Rebase vs Squash
협업
PR 템플릿Org Owner
미니 프로젝트
회의록 시스템시연 영상

🎨 내가 한 일 — 화면 기반 잡기

1와이어프레임/UIFigma로 작업(진행중) — 퍼블리싱은 늘 포토샵으로 해와서 아직 툴을 더듬더듬 익히는 중
2디자인 시스템색·타이포·간격 등 디자인 토큰 설정 (완료)
3컴포넌트 제작공통 컴포넌트 제작 (완료)
4문서 숙지기획서·요구사항 명세서 내용 정확히 숙지
왜 Figma로? — UI를 다 잡아두면 Figma에서 JSON으로 변환할 수 있고, 그 JSON을 Claude에게 주면 화면을 거의 똑같이 만들어 준다. 그래서 손으로 하나하나 퍼블리싱하는 대신, 디자인을 확정→JSON→구현으로 이어가려고 Figma를 익히는 중이다.

🗣 오전 회의 — 산출물 범위 & 일정

기획 산출물을 어디까지 이번 주에 낼지 확정했다.

구분내용
1주차 산출물기획서 · 요구사항 명세서 · ERD · API 명세 초안까지 마무리
2주차로 이월화면 목록 · 와이어프레임 · 디자인 작업
작업 방식기존과 동일하게 전원 공동 작업(각 문서 꼼꼼히 확인)
실제 코드 시작기획서 기준대로 8/3(월)부터

🔀 오후 회의 — Git 머지 정책 & PR 템플릿

브랜치·PR은 정했는데, PR을 대상 브랜치에 어떻게 합칠지(머지 방식)가 남아 논의했다. 팀 안에서 "머지 커밋을 남기자", "요즘은 Squash가 일반적이다" 등 의견이 오갔고, Claude·GPT로 각 방식을 확인했다.

1머지 방식Rebase vs Squash 중 택1 → 잠정 Squash, 내일 오전 10시까지 이견 없으면 Squash and merge로 확정
2PR 템플릿팀원마다 PR 서식이 달라 통일용 템플릿 도입 (필요 시 협의 수정)
3Org 권한GitHub Organization 전원 Role을 Owner로 변경

📚 개념 정리 — Merge 방식 3가지 (Merge / Squash / Rebase)

PR을 dev에 합칠 때 이력을 어떻게 남기느냐가 세 방식의 차이다. 결과 코드는 같지만 커밋 기록의 모양이 달라진다.

방식대상 브랜치에 남는 이력특징
Merge commit
(Create a merge commit)		feature 커밋 전부 + 병합 커밋 1개브랜치가 갈라졌다 합쳐진 모양이 그대로 보임. 이력이 풍부하지만 지저분해질 수 있음
Squash and mergePR의 여러 커밋을 합쳐서 커밋 1개이력이 아주 깔끔(PR=커밋 1개). 대신 개별 커밋과 커밋 컨벤션은 사라짐
Rebase and mergefeature 커밋들을 병합 커밋 없이 하나씩 재배치선형(직선) 이력 + 커밋 개수·메시지 그대로 유지. 커밋 컨벤션이 살아있음
# 같은 PR(feature/login: 커밋 3개)을 dev에 합칠 때

# ① Merge commit
dev: ...─ Merge pull request #12  # 병합 커밋 + feature 3커밋 다 남음

# ② Squash and merge
dev: ...─ feat(auth): 로그인 기능 추가   # 3커밋 → 1커밋으로 합쳐짐

# ③ Rebase and merge
dev: ...─ WIP1 ─ WIP2 ─ 수정3   # 병합 커밋 없이 선형으로 그대로 얹힘
쉽게 요약 — Squash는 "PR 하나 = 커밋 하나"로 합쳐서 깔끔하게. Rebase는 병합 커밋을 안 만들고 커밋들을 직선으로 이어 붙여 개별 커밋·메시지를 그대로 살림. Merge commit은 갈래가 합쳐진 흔적(병합 커밋)을 남김.
우리 팀 논의 결론 — Squash는 커밋 컨벤션이 안 잡힌 팀에 특히 유용(어차피 1커밋으로 합치니까)하지만, 그만큼 커밋 컨벤션·개별 이력이 퇴색된다는 의견이 있었다. Claude는 "커밋 컨벤션이 정해진 팀이라면 Rebase and merge"를 추천했다. 우리는 커밋 컨벤션(feat·fix…)을 정해둔 상태라, 잠정 Squash로 모였지만 Rebase 여지도 함께 검토 중이다. (참고: 표준 흐름은 feature → dev PR, dev에 PR 없이 반영 금지·CI 필수·리뷰 1명 이상·직접 push 금지)

🧾 주간 미니 프로젝트 — 회의록 시스템

1기획·발표자료강사님 피드백 반영해 업데이트 후 구글 드라이브 업로드 (완료)
2시연플러그인 사용법·시연 영상 촬영 (완료)

🧑‍💻 오늘의 코드 리뷰 — 접었다 펴는 UI는 div가 아니라 details/summary다 (HTML 3일차)

브라우저에는 이미 "접었다 펴는" 위젯이 들어 있다. div로 흉내 내면 JS를 붙여야 하고, 붙여도 키보드·스크린리더는 그냥 빠진다.

❌ 문제 코드 (전체)

<!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>
  <p>오늘 수업은 3시에 시작합니다.</p>

  <!-- ▼ 를 손으로 찍어 놓고 접힘은 아직 안 만든 상태 -->
  <div>▼ 더보기</div>
  <p>준비물: 노트북, 충전기. 지각 시 문자 주세요.</p>
</body>
</html>
무엇이 이상했나 — "▼ 더보기"라고 써 있는데 눌러도 아무 일이 없다. 내용은 처음부터 끝까지 펼쳐진 채고, Tab 키로 그 자리에 도달하지도 못한다. 여기서 "JS를 아직 안 붙였을 뿐이잖아" 하고 넘어가면 안 된다 — 그 생각 자체가 이 문제의 핵심이다. ▼를 손으로 찍고 접힘을 JS로 채우겠다고 마음먹은 순간, 브라우저가 공짜로 주는 태그를 두고 직접 만들기 시작한 것이다.

✅ 정답 (수정 부분)

  <!-- 접었다 펴는 건 details/summary 다 -->
  <details>
    <summary>더보기</summary>
    <p>준비물: 노트북, 충전기. 지각 시 문자 주세요.</p>
  </details>
왜 details/summary인가 — div는 "그냥 상자"라서 ▼는 글자일 뿐이고 접힘 동작은 어디에도 없다. 반면 details/summary는 브라우저가 세 가지를 공짜로 준다: ① 펼침/접힘 상태(open 속성이 알아서 켜졌다 꺼짐), ② 키보드 포커스(Tab 도달) + Enter/Space로 열고 닫기, ③ 스크린리더가 "접힌 항목"이라고 읽어줌(role). summary는 항상 details의 첫 자식이고 나머지가 접히는 내용이 된다. ▼도 직접 쓰지 않는다 — 브라우저가 삼각형을 그리고 방향까지 뒤집어 준다. 처음부터 펼쳐 두려면 <details open>. JS는 한 줄도 필요 없다.

🔍 확인 방법

방법❌ 문제(div)✅ 정답(details)
눌러보고 Tab으로도 눌러보기클릭해도 안 접힘, Tab 포커스도 안 감, 내용 계속 보임처음엔 접힘 → 클릭/Enter/Space로 열고 닫힘
Console: 키보드로 닿는 요소 세기
$$('a[href],button,input,summary,[tabindex]').length		0 (키보드 사용자에겐 조작할 게 없음)1 (summary가 잡힘)
DevTools → Accessibility → Rolegeneric (그냥 글자 상자)summary=DisclosureTriangle, details=group
실무에서는 이렇게 터진다 — FAQ·약관·상품 상세·필터 패널 등 접히는 UI는 어디에나 있다. div+JS로 만들면 JS가 늦게 뜨거나 에러 나는 순간 아무도 못 연다. 접근성 감사(a11y)에 그대로 걸리고, Ctrl+F로 검색해도 감춰 둔 내용이 안 잡히며, 인쇄하면 통째로 빠진다. details는 이 전부를 브라우저가 처리한다 — Chrome은 Ctrl+F로 접힌 안쪽 글자를 찾으면 알아서 펼쳐 준다.
같이 자주 틀리는 것
① 여기서 바로 onclick/JS부터 꺼내는 것("라이브러리 아코디언 쓰면 되지"도 같은 함정) — 직접 만들면 tabindex="0"(도달), keydown(Enter·Space 둘 다), aria-expanded 갱신, role 지정 넷을 다 해야 하고, 대개 Space나 aria-expanded에서 조용히 빠진다. details는 이 넷이 전부 기본값. 순서는 네이티브 먼저, 안 되는 것만 JS.
② div에 tabindex="0"만 붙이고 끝 — 포커스는 되지만 Enter/Space 처리·role은 여전히 없다(절반만 고침).
③ 기본 삼각형이 디자인과 안 맞는다고 div로 되돌아가는 것 — summary { list-style: none }으로 지우고 원하는 아이콘을 넣으면 된다.
④ 반대로 details를 만능으로 보는 것 — 부드러운 애니메이션, "한 번에 하나만 열리는" 아코디언, 마커 미세 조정이 붙으면 브라우저마다 손이 더 간다. 기본형을 details로 잡아 두고 그때 확장하면 된다.

✍️ 마치며

오늘은 "화면"과 "협업 규칙"을 동시에 다듬은 날이었다. Figma가 아직 손에 안 붙지만, 디자인을 JSON으로 뽑아 Claude로 구현하는 흐름을 알고 나니 툴 익히는 게 덜 막막해졌다. 그리고 머지 정책을 파보면서 "결과 코드는 같아도 이력의 모양이 달라진다"는 걸 처음 제대로 이해했다 — Squash는 깔끔함, Rebase는 커밋 이력 보존. 컨벤션을 정해둔 우리 팀엔 무엇이 맞을지 내일 결론이 난다. 다음 주 8/3부터 본격 구현이라, 지금 뼈대를 잘 잡아두는 게 중요하다.

🏷️ 포트폴리오  |  Figma  |  디자인 시스템  |  Git 머지 전략  |  Squash·Rebase  |  협업

'AI 기반 프론트엔드 웹개발자 양성과정' 카테고리의 다른 글

[260803 25일차] 프로젝트 #6  (0) 2026.08.03
[260731 24일차] 프로젝트 #5  (0) 2026.08.03
[260729 22일차] 프로젝트 #3  (0) 2026.07.30
[260728 21일차] 프로젝트 #2  (0) 2026.07.28
[260727 20일차] 프로젝트 #1  (0) 2026.07.28

관련글

티스토리툴바