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