프로젝트 개요
출판사 회원 단체의 홈페이지를 모바일 반응형으로 개편하는 프로젝트입니다. 첫 화면에서 회원 출판사 찾기·납본 현황 조회를 바로 쓰고, KBoard 게시판 목록·상세·글쓰기, 기업·개인 회원 가입과 로그인·내 정보·계정 찾기, 자료실을 같은 화면 체계로 정비합니다. 실제 개편은 워드프레스 테마와 KBoard 스킨으로 구현했습니다.
작업 범위
- 메인: 서가 사진 히어로 아래에 걸친 조회 카드에서 회원 출판사 찾기·납본 현황 조회·자료 검색을 탭으로 바꿔 가며 결과를 바로 확인하고, 아래로 공지·소식·행사 3열 게시판과 일정 달력이 이어지는 메인 화면을 구현합니다
- 게시판: 게시판 종류를 세로 메뉴로 고르고 목록·상세·글쓰기를 오가는 KBoard 게시판 화면을 구현하며, 비밀글은 작성자 본인에게만 열립니다
- 회원가입: 기업회원과 개인회원을 선택해 3단계로 가입하는 화면을 구현하며, 기존 회원 계정은 그대로 유지된다는 안내를 함께 보여 줍니다
- 로그인: 로그인과 계정 찾기, 로그인 후 내 정보 조회·수정을 하나의 화면 흐름으로 구현하며, 연락처는 가림 처리해 보여 줍니다
주요 업무
- 메인 화면: 조회 탭 3개가 같은 데이터 상수에서 결과를 걸러 내고, 숫자 띠와 게시판 건수는 같은 상수에서 계산합니다. 모바일에서는 조회 카드가 맨 위로 올라오고 게시판 열은 탭으로 접힙니다
- 게시판 화면: 제목 띠 아래에 목록 영역이 걸쳐 올라오고, 글을 고르면 같은 영역 안에서 상세가 열립니다. 글쓰기 대화상자에서 비밀글을 선택해 등록하면 목록에 잠금 표시로 나타납니다
- 회원가입 화면: 단계마다 입력 칸과 필요 서류가 달라지고, 마지막 단계에서 입력 요약을 확인한 뒤 접수하면 완료 카드가 같은 화면에 나타납니다
- 로그인 화면: 내 정보 카드는 전화번호와 이메일 일부를 가려 표시하고 수정 폼에서 변경하면 카드가 바로 바뀝니다
프로젝트 핵심 과제
기존 워드프레스 테마와 플러그인 구성이 소스 인수 뒤에야 확인되므로 분석 결과에 맞춰 개편 범위를 조정할 필요가 있으며
작업별 견적과 진행 확인 방법을 함께 제안합니다
기존 회원 계정과 게시글 데이터를 그대로 이어 쓰면서 화면만 바꿔야 해 검수 서버에서 회귀 검증이 필요합니다
모바일에서 60여 개 페이지의 표와 3열 게시판이 깨지지 않
페이지 유형별 재배치 규칙을 설계할 필요가 있습니다
별도 견적 대상인 화면 구성 방식 변경과 서버 이전은 개편 범위와 분리해 제안할 계획입니다
핵심 기능 상세
메인
서가 사진 히어로 아래에 걸친 조회 카드에서 회원 출판사 찾기·납본 현황 조회·자료 검색을 탭으로 바꿔 가며 결과를 바로 확인하고, 아래로 공지·소식·행사 3열 게시판과 일정 달력이 이어지는 메인 화면을 구현합니다.
- 조회 탭과 검색어를 하나의 상태로 관리해 결과 행을 걸러 내는 Custom Hook 설계
- 375·768·1440 세 중단점에서 3열 게시판을 탭으로 접는 Tailwind 규칙 구성
- 모바일 메뉴 열림·닫힘 상태와 키보드 이동을 지원하는 머리말 구성
같은 데이터 상수를 조회 카드·게시판·숫자 띠가 함께 읽어 화면 사이 숫자가 어긋나지 않게 합니다.
게시판
게시판 종류를 세로 메뉴로 고르고 목록·상세·글쓰기를 오가는 KBoard 게시판 화면을 구현하며, 비밀글은 작성자 본인에게만 열립니다.
- 게시판 종류·검색어·선택 글을 주소 해시와 동기화하는 상태 구성
- 비밀글 열람 여부를 작성자 계정 값과 비교하는 권한 검사 구성
- 첨부 목록과 글자 수 검사를 제출 시점에 실행하는 글쓰기 폼 설계
작성자와 다른 계정으로 비밀글을 열면 본문 대신 안내가 보이는 열람 권한을 화면에서 확인할 수 있습니다.
회원가입
기업회원과 개인회원을 선택해 3단계로 가입하는 화면을 구현하며, 기존 회원 계정은 그대로 유지된다는 안내를 함께 보여 줍니다.
- 회원 유형별 입력 스키마를 분리한 단계형 폼 설계
- 사업자등록번호·이메일 형식 검사를 단계 이동 시점에 실행
- 입력 중인 값을 단계 사이에서 유지하는 폼 상태 구성
한 폼 구조로 기업·개인 두 유형의 가입 절차를 처리해 회원 유형 추가에도 화면 수정이 작게 듭니다.
로그인
로그인과 계정 찾기, 로그인 후 내 정보 조회·수정을 하나의 화면 흐름으로 구현하며, 연락처는 가림 처리해 보여 줍니다.
- 로그인 상태에 따라 머리말 메뉴와 화면을 바꾸는 인증 상태 구성
- 개인정보 표시 시 마스킹 함수를 공통 모듈로 분리
- 계정 찾기 결과를 입력 일치 여부에 따라 안내하는 폼 구성
개인정보는 화면 단에서 마스킹 모듈 한 곳을 거쳐 표시되도록 설계합니다.
프로젝트 진행 단계
기존 사이트 분석과 메뉴 구조 재설계 · 2026.11
기존 워드프레스 소스·메뉴·URL 분석, 7개 대메뉴와 하위 페이지 구조 재설계
공통 UI와 테마 퍼블리싱 · 2026.11
머리말·메뉴·바닥글·버튼·입력폼·표·페이지 번호를 공통 컴포넌트로 구성하고 반응형 적용
게시판·회원 화면 정비 · 2026.11
KBoard 스킨 5종, 기업·개인 회원 가입·로그인·내 정보·계정 찾기 화면 정비
검수 환경 배포와 보정 · 2026.11
검수 서버 배포, 모바일 보정, 담당자 피드백 반영
개발 결과
기술적 주안점
- 같은 데이터 상수를 조회 카드·게시판·숫자 띠가 함께 읽어 화면 사이 숫자가 어긋나지 않게 합니다
- 작성자와 다른 계정으로 비밀글을 열면 본문 대신 안내가 보이는 열람 권한을 화면에서 확인할 수 있습니다
- 한 폼 구조로 기업·개인 두 유형의 가입 절차를 처리해 회원 유형 추가에도 화면 수정이 작게 듭니다
