website: 랜딩 페이지에 정적 FAQ 섹션 추가

지원 여부를 고민하는 방문자가 카톡이나 인스타 DM 같은 다른 채널에 물어보지 않고도 사이트 안에서 궁금증을 풀 수 있게 하자는 게 목적이었다. 어떤 문항을 넣을지보다 먼저 정해야 했던 건 "이걸 코드에 하드코딩할지, 아니면 CMS 같은 걸로 관리하게 할지"였다.

레포 위키에 정리해둔 아키텍처 결정 기준이 있다 — 변경 빈도, 이미지 포함 여부, 비개발자가 직접 관리해야 하는지를 보고 정적/동적을 가른다. FAQ는 텍스트뿐이고 한 기수에 한두 번 바뀔까 말까 한 내용이라 이 셋 중 어느 것도 해당하지 않았다. 이미 같은 기준으로 정적 처리해둔 "세션 소개", "연간 활동 계획" 섹션이 있어서 그 패턴을 그대로 따랐다 — 배열로 데이터를 관리하고, 문구가 바뀌면 그때 코드를 고치는 방식. 백엔드나 shared/ 계약은 아예 건드릴 필요가 없었다.

위치도 고민할 지점이었다. /recruit, /activities 같은 별도 페이지가 이미 레포에 있긴 한데, 아직 어디서도 링크되지 않는 빈 스텁 상태라 거기에 붙이는 건 의미가 없었다. 그래서 랜딩 페이지 안에서 자리를 찾았고, Blog와 Recruit 사이로 정했다 — 방문자가 "지원할까 말까" 고민이 최고조에 달하는 지점 바로 앞에 둬서, 망설임을 여기서 풀고 Recruit 섹션으로 넘어가게 하려는 의도다.

문항은 뭘 근거로 골랐나

브리프 기준 1순위 방문자를 "코딩을 배우고 싶은데 막막한 경희대생"으로 잡고, 사이트에 이미 있는 사실만 근거로 6개 문항을 썼다. 코딩 무경험자도 지원 가능한지, 반대로 경험자에게도 맞는 곳인지, 활동이 실제로 어떻게 진행되는지, 진짜 서비스를 만드는지, 캠퍼스 문제(지원 자체는 무관하지만 활동은 국제캠퍼스에서 진행된다는 점), 지금 지원할 수 있는지 — 이 순서로 배치했다.

커밋 흐름을 보면 처음엔 기본 6문항으로 시작했다가, 두 번째 커밋에서 Q./A. 라벨과 구분선을 넣으면서 캠퍼스 답변 문구를 다듬었다. "지원은 캠퍼스 무관, 활동은 국제캠퍼스"라는 뉘앙스가 처음엔 애매하게 읽힐 수 있어서 명확히 갈라 썼다. 세 번째 커밋에서는 경험자 대상 문항을 추가했는데, 초기 문항들이 무경험자 위주로만 짜여 있어서 "이미 코딩할 줄 아는 사람은 여기 안 맞는 건가" 하는 오해가 생길 수 있겠다 싶어 보완한 것이다.

구현은 단순하게

const faqs: QA[] = [
  { question: '코딩을 전혀 몰라도 지원할 수 있나요?', answer: '...' },
  // ...
];

배열 하나 두고 .map으로 돌리는 구조라 컴포넌트 자체는 복잡할 게 없다. 아코디언은 네이티브 <details>/<summary>를 그대로 썼다. 별도 JS 없이 키보드 포커스와 Enter/Space 토글이 기본으로 보장되고, 접근성 관련해서 따로 신경 쓸 게 줄어든다. group-open:rotate-45로 열림/닫힘에 따라 + 아이콘이 회전하는 정도만 CSS로 처리했다.

배경은 아직 Figma 시안이 나오지 않은 상태라 Project 섹션과 같은 단색 배경(#131313)만 우선 넣어뒀다. 글로우 효과 같은 건 시안이 나오면 그때 추가하기로 하고, 지금은 기능이 막히지 않게 최소한만 채워둔 것이다.

테스트와 남은 것

프론트엔드에 테스트 프레임워크가 아예 없고 CI도 lint+build만 도는 구조라, 이 PR에서 새로 테스트를 들이진 않았다. npm run lint, npm run build 통과만 확인했다. 데스크톱은 브라우저로 직접 봤는데, 모바일은 로컬 스크린샷 도구에 문제가 있어서 육안 확인을 못 했다 — 이건 배포 후 스테이지에서 확인하기로 남겨뒀다.

문항 내용도 1차 초안이라는 전제로 병합했다. 지원 여부를 고민하는 사람 입장에서 실제로 궁금해할 만한 걸 최대한 반영했지만, 모집 시즌에 실사용 피드백을 받아보면 문항이 더 추가되거나 문구가 바뀔 여지가 있다. PR은 2026-07-29에 생성돼서 같은 날 dev 브랜치에 병합됐다.