2026-09-14 ServiceOn HomePage 작업일지입니다. 오늘은 6건의 작업을 진행했습니다.

배포 (GitHub Actions)

현상/기능

  • 서버의 웹 서버 설정이 특정 경로를 기준으로 화면을 보여주도록 되어 있는데, 배포 자동화는 빌드 결과물을 상위 경로에 풀어 넣고 있어 경로가 서로 어긋나는 상황
  • 기존 파일을 삭제하며 배포하는 옵션 때문에 기준 경로 자체가 사라져 화면이 500 오류로 표시되는 상황

작업

  • 배포 시 파일을 전송하는 대상 경로를 웹 서버가 바라보는 경로와 일치하도록 조정함
  • 권한 확인 및 상태 점검 경로도 동일하게 맞췄습니다

배포 (GitHub Actions)

현상/기능

  • 배포 후 사이트가 500 오류를 반환하며, 파일은 업로드되었으나 권한 문제로 의심되는 상황
  • 로컬에서 서버 접속이 인증 문제로 실패하여 서버 로그 확인이 어려운 상황
  • 배포 절차에 파일 권한을 부여하는 단계를 추가했습니다
  • 배포 후 주요 파일 존재 여부와 서버 설정, 오류 로그를 함께 출력하도록 조정했습니다

배포 (GitHub Actions)

현상/기능

  • 배포 자동화 실행이 오류로 종료되고, 사용 중인 구성 요소가 지원 종료 예정이라는 경고가 함께 발생하는 상황
  • 실행 실패 원인은 상태 확인 단계에서 사이트가 500 오류를 반환하기 때문으로 확인된 상황
  • 사이트가 현재 500 상태이며 경로 설정과 권한 확인이 필요한 상황
  • 배포 자동화에서 사용하는 구성 요소 버전을 최신으로 갱신했습니다
  • 상태 확인 결과가 실패로 나오더라도 배포 작업 자체는 실패 처리되지 않도록 조정했습니다

배포 (GitHub Actions)

현상/기능

  • 배포 자동화가 아직 구성되어 있지 않고, 서버 접속 키는 이미 등록되어 있는 상황
  • 다른 프로젝트의 배포 설정과 계정 및 구성 이름은 동일하고 대상 경로만 다른 상황
  • 지정된 브랜치에 변경 사항이 반영되면 빌드 후 결과물을 서버 경로로 전송하는 배포 절차를 신규로 구성했습니다
  • 배포 후 사이트 상태를 확인하되 실패해도 배포 자체는 성공으로 처리되도록 구성했습니다

카드 스택 화면으로 전면 재구성

현상/기능

  • 화면과 메뉴 구조를 전면적으로 개편하고자 하는 요구가 있었고, 참고 사례처럼 카드가 순차적으로 쌓이는 입체적인 화면과 반응형 동작이 필요한 상황
  • 카드마다 다른 파스텔 색상을 적용하고, 기존 배경 요소는 삭제한 뒤 단색과 미세한 그라데이션으로 대체하기로 결정된 상황
  • 변경 기록과 상세 자주 묻는 질문은 홈 화면에서 제외하기로 결정된 상황
  • 사례 카드의 실제 시스템명과 화면, 케어·자문 금액 공개 여부가 아직 결정되지 않은 상황
  • 일부 브라우저에서는 스크롤 연동 애니메이션이 지원되지 않아 기울임 효과 없이 카드가 쌓이기만 하는 상황
  • 카드가 순차적으로 쌓이며 기울어지는 스크롤 연동 애니메이션 구조를 화면 전체에 새로 적용했습니다
  • 카드별 메타 정보와 화면에 쓰이는 텍스트 상수를 정리했습니다
  • 상단 고정 메뉴를 제거하고 현재 카드 위치를 보여주는 떠 있는 내비게이션으로 교체했습니다
  • 카드별 화면 구성 요소와 조립 구조를 신규로 작성했습니다
  • 기존 홈 화면 구성 요소와 상단 헤더, 배경 요소를 삭제하고 카드 구조로 대체했습니다
  • 여러 화면 크기에서 카드 내부 내용이 넘치지 않도록 모바일용 내용을 축약했습니다
  • 빌드 및 타입 검사를 통해 정상 동작을 확인했습니다
  • 편집 도구 사용 중 문자가 깨지는 문제가 발생하여 이후 작업은 다른 방식으로 진행했습니다

세로 섹션 구조 개편 (2차에서 대체됨)

현상/기능

  • 홈페이지 전체 구조를 참고 사례처럼 개편하고자 하는 요구가 있었고, 대상 고객과 강점을 시스템 개발 및 자동화 연동 중심으로 재정리해야 하는 상황
  • 관련 시스템 개발 경력과 최근 커머스 연동 경험을 반드시 포함하고, 유지보수 상품과 증거 자산, 원격 지원 가능 지역 등을 함께 포함하면 좋은 상황
  • 컨설팅은 무료 진단과 유료 단기 자문 흐름으로만 안내하고, 시스템을 모르는 사람도 이해할 수 있도록 메뉴와 흐름을 단순화해야 하는 상황
  • 블로그 로고와 주소를 연동하고 문의는 메일로 시작하도록 요구된 상황
  • 사례 카드의 실제 시스템명과 화면, 연동 카드의 공개 가능한 화면, 케어·자문 금액 공개 여부가 아직 결정되지 않은 상황
  • 일부 정적 페이지가 빌드 결과물에 포함되지 않는 기존 이슈가 있는 상황
  • 문의 안내 문구와 내비게이션 메뉴를 단순화했습니다
  • 하는 일, 진행 경로, 연동 사례, 진행 방식, 케어, 자문, 자주 묻는 질문 등 화면에 쓰이는 텍스트 상수를 신규로 정리했습니다
  • 사례 카드용 데이터를 신규로 추가했습니다
  • 화면에서 사용하는 데이터 구조 정의를 정리했습니다
  • 공용 로고 구성 요소를 신규로 작성하고 헤더에 적용했습니다
  • 화면 메타 정보를 커머스 연동 중심으로 교체했습니다
  • 히어로, 소개, 적합 대상, 문의 등 기존 화면 구성 요소의 문구와 구성을 수정했습니다
  • 하는 일, 경로, 연동, 사례, 진행 방식, 케어, 자주 묻는 질문, 진단 유도 화면 구성 요소를 신규로 작성했습니다
  • 전체 섹션 노출 순서를 재배치했습니다
  • 사용하지 않는 기존 화면 구성 요소를 삭제했습니다
  • 빌드 및 타입 검사를 통해 정상 동작을 확인했습니다