발주처 담당자가 한 명일 때 업체를 여러 곳 붙이면 조율이 발주처 몫이 됩니다. 요구사항 정리부터 사이트맵·스토리보드·시안·반응형 퍼블리싱·검색등록·호스팅 세팅·관리자 가이드까지 한 사람이 받는 방식으로 2년간 12건을 납품했습니다. 분야는 의료·공공·교육·제조입니다.

범위가 넓어서 순서를 고정해 놓고 돌렸습니다. 앞단은 요구사항·사이트맵·스토리보드로 페이지 수와 기능을 못 박고, 가운데는 시안과 반응형 퍼블리싱과 기능 연동, 뒷단은 검색등록·호스팅·관리자 가이드와 인수인계입니다.

방문자가 막히는 자리는 대개 두 번째 클릭입니다. 진료과목 이름을 환자는 모르고, 기관 사이트는 공지가 쌓여 사업이 안 보이고, 모바일에서 전화 거는 데 세 번이 걸립니다.

의료 사례입니다. 진료과목 분류 대신 증상을 앞에 놓았습니다. 척추·관절·비수술 회복·도수물리치료 네 갈래 아래 목디스크·오십견·고관절 같은 태그를 깔아, 아픈 곳 이름만 알아도 해당 클리닉으로 들어갑니다.

같은 사이트의 진료시간표와 모바일 화면입니다. 평일·토요일·점심·문의를 카드 네 개로 요약하고 아래에 담당의별 요일표를 붙였습니다. 모바일은 진료시간표·오시는 길·전화상담을 하단에 고정해 어느 페이지에서든 한 번에 눌립니다.

공공기관 사례입니다. 공지와 보도자료를 메인 상단에서 내리고 사업 소개를 위로 올렸습니다. 신청하기·후원하기·오시는 길은 오른쪽에 세로로 고정해 어느 페이지에서든 같은 자리에 둡니다.

교육 사업이 여러 갈래라 탭으로 나눴고, 연혁은 연도 탭을 눌러 그 해만 펼치게 했습니다. 2016년 이전은 하나로 묶어 목록이 끝없이 길어지지 않게 했습니다.

넘긴 뒤에도 담당자가 혼자 고칠 수 있도록 관리자에서 건드릴 수 있는 범위를 정해 문서로 넘겼습니다. 게시판·팝업·문의 폼·SNS 피드·외부 수강 및 예약 솔루션 연동, 포털과 검색엔진 검색등록, 호스팅 세팅과 트래픽 관리까지 포함합니다.

사용 기술입니다. WordPress, HTML5, CSS3, JavaScript, jQuery, 반응형, 크로스 브라우징, Photoshop, Illustrator. 지금은 같은 작업을 Next.js·Astro 로 정적 생성하고 Lighthouse 점수를 먼저 찍어 두고 시작합니다. 이 포트폴리오의 화면은 지금도 운영 중인 두 사이트를 그대로 찍은 것이라, 납품 후 발주처가 더한 콘텐츠가 섞여 있습니다.