겉모습은 그대로인데 속이 낡아버린 사이트가 있습니다. 방문자 눈에는 멀쩡해 보여도 내부 코드가 오래되면 보안에 구멍이 생기고, 모바일에서 레이아웃이 어긋나고, 수정 한 번 하려면 개발자를 불러야 하는 상황이 반복됩니다. 이 프로젝트는 기존 디자인과 메뉴 구조를 그대로 유지하면서 내부 코드만 완전히 새로 짠 리뉴얼입니다. 사이트는 앞으로도 계속 운영되는 만큼, 관리자가 혼자서 콘텐츠를 갱신하고 프로모션을 교체할 수 있는 구조로 함께 정비했습니다.
무엇이 바뀌었나요
방문자 입장에서는 달라진 것이 없습니다. 메뉴 위치, 페이지 주소, 콘텐츠 모두 그대로입니다. 바뀐 것은 눈에 보이지 않는 부분입니다. 서버에서 페이지를 만들어내는 처리 방식을 최신 버전으로 전면 재작성했고, 데이터베이스도 함께 이전했습니다.
내부를 새로 짤 때 기능마다 독립된 구역을 나눠 관리하는 방식을 택했습니다. 공지사항, 프로모션, 문의, 팝업이 각각 분리된 구조여서, 나중에 한 기능을 수정하거나 새 기능을 추가해도 다른 부분이 영향을 받지 않습니다. 오래 운영할 사이트일수록 이런 구조가 유지보수 비용을 줄여줍니다.
화면 구성과 메뉴 구조
상단 메뉴는 회사 소개, 솔루션, 소프트웨어, 클라우드, 서비스, 공지사항 여섯 항목으로 구성되어 있습니다. 솔루션은 IT 인프라와 보안으로, 소프트웨어는 오피스 제품군과 백신으로 나뉩니다. 방문자가 찾는 제품이 어느 카테고리 아래 있는지 처음 보는 사람도 예측할 수 있는 구조입니다.
하단 푸터에도 전체 메뉴를 똑같이 펼쳐두었습니다. 페이지를 내리다가 다른 항목으로 이동하고 싶을 때 다시 위로 올라가지 않아도 됩니다. 리뉴얼 과정에서 이 구조를 그대로 이어받아, 기존에 사이트를 사용하던 방문자가 혼란 없이 이용할 수 있도록 했습니다.
홈 화면 구성
메인 배너
첫 화면 배너는 왼쪽 사진과 오른쪽 텍스트가 나란히 놓이는 구조입니다. 사진이 바뀌어도 오른쪽 글씨가 배경에 묻히지 않아 메시지를 또렷하게 전달할 수 있습니다. 배너는 자동으로 넘어가며, 하단 점을 클릭해 원하는 슬라이드로 이동할 수도 있습니다.
프로모션 카드와 공지사항
프로모션 섹션은 카드 형태로 나열되고, 각 카드에 진행 상태(진행중/종료)가 표시됩니다. 지금 쓸 수 있는 혜택인지 한눈에 확인할 수 있고, 운영자 입장에서도 끝난 프로모션을 지우지 않고 상태만 바꿔두면 됩니다. 공지사항은 썸네일 이미지와 제목을 함께 보여주어 목록을 훑어보기 쉽습니다.
팝업 기능 개편
예전에는 텍스트만 띄우는 단순한 팝업이었습니다. 이번에 이미지를 올릴 수 있는 방식으로 바꾸었고, 화면 어디에 띄울지(상단/중앙/하단), PC와 모바일 중 어디에 보여줄지도 따로 설정할 수 있습니다. 프로모션 성격에 따라 노출 방식을 다르게 운영할 수 있게 된 것입니다.
팝업 이미지와 기간은 관리자 페이지에서 직접 교체합니다. 이벤트가 시작되거나 끝날 때 개발자에게 연락할 필요가 없습니다. "오늘 하루 열지 않기" 버튼도 그대로 제공해, 자주 방문하는 사용자에게 팝업이 반복되지 않도록 했습니다.
관리자 기능
직접 다룰 수 있는 것들
공지사항, 프로모션, 문의 내용, Q&A, 팝업을 관리자 페이지에서 직접 등록하고 수정할 수 있습니다. 글과 이미지, 첨부파일을 올리면 사이트에 바로 반영됩니다. 코드를 건드리거나 외부 업체에 요청하지 않아도 됩니다.
프로모션은 진행중/종료 상태를 전환하는 방식으로 관리합니다. 지난 프로모션을 지우지 않고 남겨두면 다음 시즌에 비슷한 내용을 준비할 때 참고할 수 있습니다. 관리자 계정과 접근 권한도 직접 설정할 수 있어, 담당자가 바뀌어도 개발자 없이 정리할 수 있습니다.
보안 처리
오래된 코드를 새로 짜면서 자주 발생하는 해킹 시도 유형에 대한 차단 처리를 함께 적용했습니다. 외부에서 위조 요청을 보내거나 악성 스크립트를 심는 방식의 공격을 막는 로직입니다. 파일을 업로드할 때 허용된 형식인지 확인하는 과정도 강화했고, 접속 구간 전체에 HTTPS(자물쇠 표시 보안 접속)를 적용했습니다.
검색 노출 유지
사이트를 새로 만들거나 코드를 대폭 바꿀 때 가장 걱정되는 부분 중 하나가 검색 순위 변동입니다. 검색엔진은 페이지 주소와 제목, 내용을 기준으로 노출 순위를 관리하는데, 이것이 바뀌면 그동안 쌓아온 순위가 흔들릴 수 있습니다.
이번 리뉴얼에서는 페이지 주소(URL), 제목 태그, 메타 설명을 모두 기존과 동일하게 유지했습니다. 검색엔진이 새 코드에서도 이전과 같은 페이지로 인식할 수 있도록 처리했고, 리뉴얼 전후로 검색 순위 변동 없이 이전을 완료했습니다. SNS 공유 시 미리보기 이미지와 설명이 일관되게 표시되도록 오픈그래프 태그도 함께 정비했습니다. IT 인프라 솔루션 정보, 보안 제품 설명, 클라우드 서비스 안내가 일관된 분류 체계 안에서 연결되도록 정리한 것이 검색 대응에도 이어집니다.
모바일 대응
화면 크기에 따라 레이아웃이 자동으로 바뀌는 반응형 구조를 적용했습니다. 스마트폰에서는 상단 메뉴가 접혀 버튼 하나로 열리고, 배너 이미지는 화면 비율에 맞게 크기가 조정됩니다. 프로모션 카드는 가로로 나열되다가 작은 화면에서는 세로로 쌓이는 방식으로 전환됩니다. 터치로 누를 때 버튼이 작아서 불편하지 않도록 크기와 간격도 함께 정리했습니다.
