기업 홈페이지에 프로모션 팝업을 등록한 뒤 PC에서는 정상적으로 보였지만, 모바일에서는 내용을 확인하기 불편했던 적이 있어요.
팝업 이미지가 PC 화면을 기준으로 만들어져 모바일 화면에서는 크기와 배치가 적절하지 않았기 때문입니다. 홈페이지에서 간단하게 이미지만 교체하면 끝날 것 같았지만, 사용자가 접속하는 화면까지 확인하지 않으면 수정이 완료된 것이 아니었어요.
제가 유지보수한 홈페이지는 IT회사의 기업 소개와 제품 소개, 교육 안내, 교육 신청, 문의 기능을 제공하는 사이트였습니다. 새 홈페이지를 처음부터 만드는 역할은 아니었고, 운영 중인 홈페이지의 정보를 지속적으로 수정하고 관리했어요.
※ 회사명, 제품명, 홈페이지 주소와 실제 관리자 화면은 공개하지 않습니다.
정기교육 일정과 프로모션 팝업을 자주 수정했어요
홈페이지 수정 요청은 주로 마케팅 팀장님이 메일로 전달했습니다.
요청 내용을 확인한 뒤 제가 직접 처리할 수 있는 작업인지, 외부 업체의 개발이 필요한 작업인지 먼저 구분했어요.
직접 수정했던 항목은 주로 다음과 같았습니다.
- 정기교육 날짜와 시간 변경
- 교육 신청 페이지 연결
- 교육 관련 이미지 교체
- 메인 프로모션 팝업 등록
- 기존 팝업 이미지와 문구 변경
- 종료된 프로모션 팝업 비활성화
- 간단한 제품 및 안내 정보 수정
워드프레스 관리자 페이지에서 변경할 수 있는 이미지와 팝업, 일정은 내부에서 직접 수정했습니다. 필요한 경우 드림위버와 FTP도 함께 사용했어요.
반면 새로운 기능이 필요한 페이지나 홈페이지의 큰 레이아웃을 바꾸는 작업은 직접 수정하지 않고 외부 업체에 요청했습니다. 간단한 운영 업무와 개발 업무의 범위를 구분해야 불필요한 오류를 줄일 수 있었어요.
수정 전에는 기존 파일을 백업했어요
운영 중인 홈페이지를 수정할 때는 기존 파일을 먼저 백업한 뒤 작업했습니다.
홈페이지에 이미 정상적으로 사용되고 있는 파일을 바로 덮어쓰면 문제가 생겼을 때 이전 상태로 되돌리기 어려울 수 있었어요. 특히 FTP를 이용해 파일을 변경할 때는 같은 이름의 파일을 잘못 올리지 않도록 주의했습니다.
정확한 호스팅 서비스는 오래전 작업이라 기억이 분명하지 않지만, 기존 파일을 보관한 다음 수정본을 적용하는 순서는 유지했어요.
작업 전에 다음 내용을 확인했습니다.
- 수정할 페이지와 파일이 맞는지
- 기존 이미지와 수정 이미지의 파일명이 같은지
- 연결해야 하는 교육 신청 주소가 정확한지
- 기존 파일을 별도로 보관했는지
- 수정 요청 메일에서 빠진 내용이 없는지
백업은 눈에 보이는 디자인 작업은 아니지만 운영 중인 홈페이지를 안전하게 수정하기 위해 필요한 과정이었습니다.
PC에서는 정상이었지만 모바일에서는 화면 밖으로 넘쳤어요
프로모션 팝업을 등록한 뒤 PC에서는 정상적으로 보였지만, 모바일에서는 팝업이 화면 밖으로 넘어가는 문제가 생겼어요.
관리자 화면에서 등록을 마쳤고 PC에서도 확인했지만, 모바일로 직접 접속해 보니 팝업이 화면 안에 들어오지 않았습니다.
이를 해결하기 위해 팝업의 크기와 위치를 조정하고, PC와 모바일의 표시 설정을 분리했어요.
당시 사용한 팝업 도구의 이름과 정확한 설정값은 기억나지 않습니다. 따라서 특정 프로그램의 사용법보다 실제로 조정한 항목과 확인한 과정을 중심으로 설명합니다.
팝업 크기와 위치를 조정하고 표시 설정을 분리했어요
수정한 항목은 팝업의 크기와 위치, PC·모바일 표시 설정이었습니다.
모바일 화면 안에 팝업이 들어오도록 크기와 위치를 조정하고, PC와 모바일의 표시 설정을 분리했어요. PC에서 정상적으로 보이던 상태만 기준으로 삼지 않고 모바일에서도 따로 확인했습니다.
당시의 문제와 대응을 정리하면 다음과 같습니다.
| 구분 | 실제 작업 내용 |
|---|---|
| 발견한 문제 | 모바일에서 팝업이 화면 밖으로 넘어감 |
| 크기·위치 조정 | 모바일 화면 안에 표시되도록 팝업 크기와 위치 수정 |
| 표시 설정 분리 | PC와 모바일의 표시 설정을 나누어 적용 |
| 수정 결과 확인 | 수정 후 홈페이지에 직접 접속해 표시 상태 확인 |
팝업의 적절한 크기와 위치는 홈페이지 구조와 사용하는 도구에 따라 달라질 수 있습니다. 이 글에서는 모든 사이트에 같은 수치를 적용하기보다 실제 접속 화면에서 넘침 여부를 확인했던 경험을 공유합니다.
수정 후에는 실제 화면에서 먼저 확인했어요
수정 작업이 끝나면 제가 먼저 홈페이지에 접속해 결과를 확인했습니다.
관리자 페이지에 새 이미지가 등록됐다고 해서 실제 방문 화면에도 문제없이 표시된다고 단정할 수 없었어요. PC와 모바일에서 각각 홈페이지를 열고 팝업과 교육 일정이 시각적으로 잘 보이는지 확인했습니다.
제가 확인한 뒤에는 수정 요청을 전달한 담당자에게 결과를 공유하고 최종 확인을 받았어요.
전체 과정은 다음과 같았습니다.
- 메일로 수정 요청 확인
- 직접 수정할 작업과 외부 요청 작업 구분
- 기존 파일 백업
- 관리자 페이지 또는 파일 수정
- PC 화면 확인
- 모바일 화면 확인
- 링크와 신청 페이지 확인
- 담당자에게 결과 공유
- 최종 확인 후 작업 종료
담당자에게 완료했다고 전달하기 전에 실제 방문자가 보는 화면을 먼저 확인하는 것이 중요했어요.
간단한 수정도 운영 관점에서 확인해야 했어요
홈페이지 유지보수는 새로운 사이트를 처음부터 디자인하는 작업과는 달랐습니다.
이미 운영 중인 홈페이지의 구조를 유지하면서 변경된 정보만 정확하게 반영해야 했어요. 교육 일정이나 팝업 이미지처럼 간단해 보이는 작업도 기존 파일 백업, 링크 확인, PC와 모바일 검수가 필요했습니다.
특히 PC용 팝업이 모바일에서 불편하게 보였던 경험을 통해 관리자 화면보다 실제 사용자의 화면에서 결과를 확인해야 한다는 점을 알게 됐어요.
지금 다시 홈페이지 팝업을 수정한다면 처음부터 PC와 모바일 화면을 모두 기준으로 이미지와 설정을 준비하고, 교육 신청 링크까지 직접 눌러본 뒤 담당자에게 완료 내용을 전달할 것 같아요.
교육 신청 링크와 모바일 화면을 확인했던 eDM 제작 과정은 아래 글에서도 확인할 수 있습니다.
