bodalab/doc/figma-specs-0624/11-interaction-notes.md

동작(인터랙션) 주석 — NEW 섹션에 흩어져 있던 디자이너 노트

Screen Pages 캔버스의 NEW 섹션 안에는 MAIN_NEW_PC / MAIN_NEW_MO 프레임 외에도, 같은 레벨에 동작 스펙을 적은 TEXT 노드와 별도 모달/팝업 프레임이 형제로 놓여 있었다. 화면 자체(01-home-pc.json 등)만 봐서는 안 보이는 내용이라 따로 정리한다.

이 폴더의 13개 섹션 .txt 안에는 이런 주석이 섞여 있지 않음을 확인함 (grep으로 "노출/더보기/유효성/동의/인터렉션/참조/롤오버" 검색 — 매칭된 건 06-contact의 체크박스 라벨 텍스트("[필수] 개인정보 수집 및 이용 동의") 하나뿐이고, 이미 알고 있던 화면 텍스트임).

구현에 영향 있는 것

• HISTORY 아코디언은 단일 열림(exclusive) (id 2319:2231)

  아코디언으로 구성. 해당 영역 진입 시 2025년도 히스토리 펼쳐진 상태가 디폴트. 다른 연도 + 버튼 선택 시 펼쳐 있던 영역 닫고 열기.

  현재 src/js/main.js의 .history__yearToggle 클릭 핸들러는 클릭된 그룹만 토글하고 다른 그룹은 안 건드림 → 여러 연도를 동시에 열 수 있음. 스펙대로면 한 그룹을 열 때 다른 그룹은 닫혀야 함.

• PROJECT 더보기 = 페이지네이션 (id 2319:2116, PROJECT 섹션 근처)

  처음 10개 노출, 더보기 시 10개.

  현재 index.html의 .project__grid는 전체 카드를 한번에 렌더링하고 .btnMore는 그냥 정적 버튼. 10개만 보이게 하고 클릭 시 10개씩 추가 노출하는 JS가 없음.

• Recruitment 태그 더보기 = 페이지네이션 (id 2319:5680, mobile Expertise 근처)

  처음 6개 노출, 더보기 시 6개.

  .careerTags도 마찬가지로 전부 렌더링되어 있고 더보기 동작 없음.

• 개인정보 수집·이용 동의 모달 (09-privacy-modal-pc.json = node 2319:2118, 09-privacy-modal-mobile.json = node 2376:2184) PC/모바일 둘 다 06_Expertise_popup(또는 mobile 06_Expertise) 프레임 안에 MODAL 자식으로 풀텍스트 약관 + "동의합니다" 버튼이 디자인되어 있음. 텍스트 내용(PC/모바일 동일):

  1. 개인정보의 수집 및 이용 목적 — 회사는 고객 문의에 대한 답변 제공 및 원활한 의사소통 경로 확보를 목적으로 개인정보를 수집 및 이용합니다.
  2. 수집하는 개인정보의 항목 — 필수항목: 회사명, 담당자 이름, 연락처, 이메일
  3. 개인정보의 보유 및 이용 기간 — 원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기. 소비자 불만/분쟁처리 기록: 3년, 기타 문의사항: 처리완료 후 6개월(또는 1년).
  4. 동의를 거부할 권리 및 동의 거부에 따른 불이익 — 거부 시 문의 접수 및 답변 서비스 이용이 제한될 수 있음.

  현재 _contact.scss/index.html의 .contactForm__checkbox는 라벨 텍스트만 있고, 클릭 시 이 내용을 보여주는 모달이 없음.

• SEND 버튼 유효성 검증 (id 2319:5997, Contact 영역 근처)

  SEND버튼 선택 시 입력 항목·개인정보 동의 필수 항목 유효성 체크. 미입력 항목 있을 경우 Alert "필수 항목을 확인해 주세요". 모두 완료 시 Alert "전송 완료".

  현재 main.js에는 .btnSend 클릭 시 폼 검증/알럿 로직이 없음 (폼 자체도 실제 전송 엔드포인트가 없어 프론트만으로는 "전송 완료"가 무엇을 의미하는지도 확인 필요).

참고용, 영향 없음

• footer 전용 노드 존재 확인 (08-footer-instance-pc.json = node 2247:2294). 예전 기록("footer 전용 노드 없음")이 사실과 달랐음. 내용(THE BODA LAB / Mail·Tel / © 2026 BODA LAB) 확인해보니 현재 구현과 이미 일치 — 수정 불필요.
• HISTORY 중복 프레임 (10-history-duplicate-ref.json = node 2301:1896). 주석 옆에 참고용으로 복제해둔 사본으로 추정, 내용은 원본(03-history-pc.json)과 동일.
• 외부 레퍼런스 링크 (홈/ABOUT 인터랙션 참조용 외부 사이트, id 2317:2106/2319:2110/2378:2292) — 애니메이션 영감용 링크일 뿐 직접 가져올 사양은 아님.
• "썸네일 롤오버시 크기 변화 효과" (id 2378:2293) — 이미 _project.scss의 .project__card:hover .project__thumbImg { transform: scale(1.04); }로 구현되어 있음. 일치.

결론

스타일(폰트/색상/간격/보더)은 이제 거의 다 받았다고 봐도 되지만, 동작(behavior) 스펙은 이번에 처음 발견했고 위 4가지(아코디언 단일열림, PROJECT/태그 더보기 페이지네이션, 개인정보 동의 모달, SEND 유효성 검증)는 아직 구현 안 됨. 구현 여부는 별도로 우선순위 정해서 진행.