실무·
더원서울안과 홈페이지 리뉴얼
진료 안내부터 예약문의·회원 인증까지 다루는 강남 안과 병원의 상용 홈페이지
병원 담당자가 관리자 페이지에서 직접 고칠 수 있도록, 화면에 박혀 있던 내용을 실데이터로 옮겼습니다
이렇게 만들었습니다
와커스에서 맡은 강남 더원서울안과 홈페이지 전면 리뉴얼입니다. 지금 the1seoul.com에서 운영 중이며, 저는 사용자 사이트를 중심으로 관리자 페이지와 백엔드 API까지 오가며 작업했습니다. 여러 명이 함께 만든 프로젝트이고 아래는 그중 제가 맡은 부분입니다.
옮기고 나니 홈페이지가 정적으로 캐싱돼 관리자가 바꾼 내용이 바로 보이지 않았습니다. 데이터를 실시간으로 가져오도록 고쳐 담당자가 수정한 결과를 그 자리에서 보게 했습니다.
비밀번호 찾기는 원래 임시 비밀번호를 메일로 보내는 방식이었습니다. 메일함에 평문 비밀번호가 남고 받은 사람이 바꾸지 않으면 그대로 쓰입니다. 본인 확인 후 즉시 재설정하는 방식으로 바꿔 임시 비밀번호가 오가는 구간 자체를 없앴습니다.
존재하지 않는 아이디와 존재하는 아이디의 응답이 서로 달라 가입 여부를 알아낼 수 있었는데, 그 차이를 없앴습니다. 로그인 시도에는 횟수 제한을 걸어 무차별 대입을 어렵게 했고 관리자 화면과 게시판 대시보드에서는 접근 제어가 아예 빠진 경로를 찾아 채웠습니다. 회원가입에서 개인정보가 노출되거나 약관 동의를 건너뛰는 길도 막았습니다. 파일 업로드 크기 제한은 서버가 파일을 다 받은 뒤가 아니라 받기 전 단계에서 걸리도록 옮겼습니다.
이전 회사에서 PDF 뷰어에 스크린리더 대응을 넣었던 경험이 여기서 다시 쓰였습니다. 접근성은 기능을 다 만든 뒤 덧붙이는 게 아니라, 그 기능이 누구를 막고 있는지 보는 일에 가깝다고 생각합니다.
게시판 글과 팝업 이미지는 레거시 서버에 쌓여 있었습니다. 업로드 파일은 코드 저장소에 들어가지 않는 데이터라 git으로는 따라오지 않습니다. 그대로 두면 글은 보이는데 이미지만 404가 납니다. 옛 서버의 실제 폴더를 새 서버의 도커 볼륨으로 옮겨 붙였습니다.
인증서는 발급받은 뒤 만료 전에 스스로 갱신되도록 걸어 뒀습니다. 사람이 기억해서 눌러야 하는 일로 남기면 언젠가 만료된 인증서로 병원 홈페이지가 열립니다. 준비가 끝나고 나서 도메인을 새 서버로 넘겼습니다.
이 작업은 순서가 곧 안전장치였습니다. 인증서를 미리 준비해 두지 않고 도메인부터 넘기면 그 사이 방문자는 경고 화면을 봅니다. 되돌리기 어려운 일일수록 먼저 확인하고 나중에 넘긴다는 걸 운영 중인 사이트를 옮기며 배웠습니다.
프론트엔드만 하던 시절에는 "배포는 되는 것"이었는데, 직접 다루면서 서비스가 끊기지 않게 바꾸는 일이 따로 있다는 걸 알게 됐습니다.
화면에 박혀 있던 내용을 데이터로
리뉴얼 초기 화면에는 의료진 이름도, 공지 목록도 코드 안에 그대로 적혀 있었습니다. 병원에서 글 하나 고치려면 개발자를 불러야 하는 구조였습니다. 병원소식 · 공지사항 · 칼럼 · 수술체험기 · 예약문의 다섯 게시판과 의료진 소개, 학술발표, 유튜브, 메인 팝업, 그리고 푸터와 퀵바에 들어가는 병원 기본정보까지 관리자 페이지에서 고치면 사이트에 반영되도록 옮겼습니다.옮기고 나니 홈페이지가 정적으로 캐싱돼 관리자가 바꾼 내용이 바로 보이지 않았습니다. 데이터를 실시간으로 가져오도록 고쳐 담당자가 수정한 결과를 그 자리에서 보게 했습니다.
회원 인증을 처음부터 끝까지
회원가입 · 로그인 · 아이디/비밀번호 찾기 · 마이페이지 · 회원탈퇴에 이르는 인증 흐름 전반을 맡았고 네이버와 카카오 소셜 로그인을 붙였습니다.비밀번호 찾기는 원래 임시 비밀번호를 메일로 보내는 방식이었습니다. 메일함에 평문 비밀번호가 남고 받은 사람이 바꾸지 않으면 그대로 쓰입니다. 본인 확인 후 즉시 재설정하는 방식으로 바꿔 임시 비밀번호가 오가는 구간 자체를 없앴습니다.
공개 사이트라서 더 신경 쓴 것
병원 홈페이지는 누구나 들어올 수 있고 회원 정보에는 환자가 섞여 있습니다. 기능을 붙이면서 뚫린 곳을 함께 막았습니다.존재하지 않는 아이디와 존재하는 아이디의 응답이 서로 달라 가입 여부를 알아낼 수 있었는데, 그 차이를 없앴습니다. 로그인 시도에는 횟수 제한을 걸어 무차별 대입을 어렵게 했고 관리자 화면과 게시판 대시보드에서는 접근 제어가 아예 빠진 경로를 찾아 채웠습니다. 회원가입에서 개인정보가 노출되거나 약관 동의를 건너뛰는 길도 막았습니다. 파일 업로드 크기 제한은 서버가 파일을 다 받은 뒤가 아니라 받기 전 단계에서 걸리도록 옮겼습니다.
돌아가던 시스템에 새 사이트를 붙이기
병원은 이미 쓰던 예약 시스템과 오래된 언론기고 데이터가 있었습니다. 새 홈페이지가 그것들을 계속 읽어야 했습니다. 리뉴얼 중 끊긴 기존 예약 시스템 연동을 복구하고 진료과 표기를 양쪽에서 같게 맞췄으며, 새 칼럼 메뉴와 옛 언론기고가 통합 검색에서 뒤섞이던 것을 바로잡았습니다.캡차를 듣게 만들기
아이디 · 비밀번호 찾기에는 캡차가 있는데, 눈으로 읽어야만 통과할 수 있었습니다. 안과 홈페이지에서 시력이 나쁜 사람이 계정을 못 찾는 상황이 될 수 있어 음성 듣기를 추가했습니다.이전 회사에서 PDF 뷰어에 스크린리더 대응을 넣었던 경험이 여기서 다시 쓰였습니다. 접근성은 기능을 다 만든 뒤 덧붙이는 게 아니라, 그 기능이 누구를 막고 있는지 보는 일에 가깝다고 생각합니다.
옛 서버에서 새 서버로 옮기기
리뉴얼은 코드를 새로 쓰는 것으로 끝나지 않았습니다. 실제로 운영 중인 사이트를 새 인스턴스로 옮겨 태우는 일을 함께 맡았습니다.게시판 글과 팝업 이미지는 레거시 서버에 쌓여 있었습니다. 업로드 파일은 코드 저장소에 들어가지 않는 데이터라 git으로는 따라오지 않습니다. 그대로 두면 글은 보이는데 이미지만 404가 납니다. 옛 서버의 실제 폴더를 새 서버의 도커 볼륨으로 옮겨 붙였습니다.
인증서는 발급받은 뒤 만료 전에 스스로 갱신되도록 걸어 뒀습니다. 사람이 기억해서 눌러야 하는 일로 남기면 언젠가 만료된 인증서로 병원 홈페이지가 열립니다. 준비가 끝나고 나서 도메인을 새 서버로 넘겼습니다.
이 작업은 순서가 곧 안전장치였습니다. 인증서를 미리 준비해 두지 않고 도메인부터 넘기면 그 사이 방문자는 경고 화면을 봅니다. 되돌리기 어려운 일일수록 먼저 확인하고 나중에 넘긴다는 걸 운영 중인 사이트를 옮기며 배웠습니다.
배포에서 배운 것
이 프로젝트는 블루-그린 무중단 배포로 나갑니다. 트래픽을 새 버전으로 넘긴 직후 주요 페이지가 살아 있는지 확인하는 단계가 있는데, 서버가 미처 준비되기 전에 검사가 들어가 멀쩡한 배포가 실패로 처리되곤 했습니다. 검증에 재시도를 넣어 해결했습니다.프론트엔드만 하던 시절에는 "배포는 되는 것"이었는데, 직접 다루면서 서비스가 끊기지 않게 바꾸는 일이 따로 있다는 걸 알게 됐습니다.