4번째 복지관 홈페이지를 리뉴얼 하기로 했다.
전체적으로 사단법인 사랑나눔 법인의 erp 시스템을 만들면서 수탁기관과 모든 시스템을 하나로 모아 관리할 수 있는 기능을 추가하면서 자연스럽게 기획된 프로젝트이다.
이전에는 라이믹스(Rhymix)라는 국내 유명 CMS를 사용하여 제작하고 운영해 왔다.
하지만 이번엔 다양한 데이터를 연결하여 API를 연결하고, 또 다양한 기능을 고민하고 있어 관리자 페이지부터 이용자 페이지까지 직접 만드는 방향으로 설정했고, 리액트(React)와 Next.js 를 이용해 만들계획을 세웠다.
기획에 앞서 지난 8년의 기록을 돌아봤다.
본격적인 리뉴얼에 앞서 어떤 것들을 중점으로 바꿀것인지, 그동안 어떤 니즈가 있었는지 파악해봤다. 사실 이걸 데이터로 취합하고 분석한 다는 것은 어려운 일이다. 하지만 2017년부터 직접 제작하고 관리해왔기 때문에 모든 데이터가 내가 확인 가능한 상태로 있어 모든 데이터를 Ai에게 분석시켰다.
2017년부터 지금까지 초반은 기록이 제대로 되지 않았겠지만 400만명 이상이 우리 홈페이지를 다녀갔다.
물론 봇도 있을 것이고...하겠지만... 어쨌든 이 데이터를 근거로 어떤 페이지가 가장 인기가 많았고, 어떤 분들이 회원가입이 되어 있고, 회원들의 평균연령층은 어떻게 이런 것들을 모두 분석해봤다.
가입한 일반 회원이 400명이 넘고, 하루 방문자는 평균 400명 남짓 된다. 한 달로 치면 1만 2천 명쯤 다녀가는 셈이니, 취향이 아니라 기록으로 충분히 활용할 수 있는 데이터라고 생각했다.
- 회원들이 가장 많이 본 곳은 점심식단 게시판, 그다음이 갤러리, 의외의 3위가 채용게시판이었다.
- 작은 글씨, 셔틀버스이용방법의 확인에 대한 불편함을 이야기 해주신 부분 확인이 되었다.
1위는 예상대로 식단 게시판이었고 2위가 갤러리. 3위가 채용게시판 이었다.
채용게시판이 이렇게 인기가 있었던 이유는 우리 복지관에 관심이 많다는 것을 뜻하는 것으로 볼 수 있다.
새삼 이곳 직원이라는 게 감사했다. 힘들고 괴로웠던 순간에 그만두려했던 나에게 조금의 반성도 하게했다...
어쨌든 데이터분석된 결과를 토대로 기획/설계 단계를 진행했다.
라이믹스 안녕.
오해가 생길까 봐 먼저 적어둔다. 내가 rhymix CMS를 사용하지 않고 자체개발하기로 한 이유는 라이믹스가 않좋아서가 아니다. 라이믹스는 정말 좋은 도구이다. XpressEngine에서 갈라져 나온 국산 오픈소스 CMS로, 공식 문서 기준으로 PHP 7.4 이상, MySQL 5.7이나 MariaDB 10.1 이상이면 돌아가고, GPL v2 라이선스라 기관도 무료로 사용할 수 있다.
위에서 언급했듯이 법인erp 스스템에 데이터베이스를 통합하고 상호 뎅이터를 공유하고 보완할 수 있게 하는 기능을 고민하다보니 자체 개발을 하는 것이 더 좋을 것이라는 판단을 했다.
직접 만들며 개발하게 되면 필요한 곳을 바로 고칠 수 있다는 것.
가능한 기능인지, 불가능한 기능인지 고민하지 않아도 된다.
장점만 있진 않다. Next.js는 리액트로 웹사이트를 만들 때 쓰는 틀인데, 2026년 8월 3일에 16.3 버전이 나왔을 만큼 업데이트가 잦다. 때문에 해당 업데이트를 안전하게 적용시키고, 문제가 생겨도 해결할 수 있도록 원본데이터를 잘 관리해야 한다.
어르신이 쓰는 홈페이지라면, 큰 글씨와 읽어주기부터
이용자가 어르신이라는 건 취향 문제가 아니다. 이 전 홈페이지의 건의사항 페이지에 글자가 너무 작다는 의견이 있었다. 당시 내가 아직 시력이 좋아서 작은 글씨도 문제 없이 읽어내기에 충분했다. 하지만 이제 나도 눈이 어느새 침침해질 때가 있어 그 마음을 동감할 수 있었다. 그래서 글자 크기를 최대한 크게 잡았고, 직접 읽는 것이 불편하신 분들을 위해 게시글마다 본문 읽어주기를 넣어 소리로도 들을 수 있게 했다.
또 장애인차별금지법에 따른 웹 접근성 의무는 2009년 공공기관을 시작으로 단계적으로 넓어졌고, 2015년 4월 11일부터는 사실상 모든 법인과 사업자가 대상이 됐다. 국가 표준인 한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.2는 4개 원칙, 14개 지침, 33개 검사항목으로 되어있다.
웹 접근성 품질인증의 기술심사도 2025년 1월부터 이 2.2를 기준으로 진행된다. 전문가 심사 합격선이 검사항목 준수율 95% 이상이라니, 몇 개쯤 빠뜨려도 통과되는 시험은 아니라는 뜻이다.
서울디지털재단이 낸 고령층 친화 디지털 접근성 표준도 방향이 비슷하다. 글자는 크게, 배경과 글자의 밝기 차이는 뚜렷하게, 용어는 쉽게. 특히 행정용어나 익숙하지 않은 영어 표기는 한글로 풀어 쓰라는 대목이 오래 남았다. 메뉴 이름 하나 정하는 일이 결국 접근성과 관련 있는 부분이다.
읽어주기, 예산이 없어...어색하지만...
읽어주기는 넣고 싶다고 다 같은 품질이 나오지 않는다. 글자를 사람 목소리로 바꿔 읽어주는 기술을 음성 합성이라고 하는데, 선택지가 크게 둘로 나뉘었다.
| 구분 | 브라우저에 내장된 음성 합성 | 돈을 내고 쓰는 음성 합성 서비스 |
|---|---|---|
| 비용 | 추가 비용 없이 사용 | 읽은 글자 수만큼 요금이 붙는 방식이 일반적 |
| 목소리 | 이용자의 기기에 깔린 목소리를 그대로 사용 | 자연스러운 목소리를 골라 지정 가능 |
| 일관성 | 기기마다 톤이 달라질 수 있음 | 누가 듣든 같은 목소리 |
| 브라우저 | 크롬·엣지 계열은 잘 되고 일부는 편차가 있음 | 소리 파일을 받아 재생하므로 편차가 적음 |
더 자연스러운 목소리로 읽어드리고 싶었지만 예산이 없다. 아쉬운 대로 기능을 넣고 무료 중에 가장 자연스러운 모델을 테스트하여 기능을 추가하는 선에서 마무리했다. 그래도 순서는 틀리지 않았다고 생각해요. 완벽한 목소리를 기다리다 아무것도 못 듣게 하는 것보다, 지금 들리게 하는 편이 낳다.
진짜 고비는 디자인이 아니라 데이터 이사였어요
새 홈페이지에서 제일 고생한 대목은 이전 데이터를 옮겨오는 일이었다.
400명이 넘는 회원, 개관 이후 쌓인 게시물과 사진. 숫자로 적으면 한 줄인데 실제로는 구조가 다른 두 시스템을 맞춰 붙이는 작업이다. 새 기능은 만들면 그만이지만, 옛 자료는 하나만 어긋나도 바로 문제가 될 수 있고, 기존의 우리가 힘들게 만들어온 자료를 날릴 수는 없었다.
법인 ERP가 모든 자료를 관리하고 홈페이지는 받아서 보여주는 구조로요. 직원 로그인까지 법인 체계 쪽으로 분리했고요.
이렇게 두면 산하 기관들이 같은 내용을 각자 가입하고 또 그 정보들을 다시 입력할 일이 없어진다. 한 번 정확히 넣으면 등록하면 우리 법인과 자신이 속한 산하기관의 홈페이지 등에 접속할 수 있다. 법인 ERP와 평생교육 프로그램 통합관리시스템은 이야기가 길어서 다음 글로 따로 소개할게요.
'어디서 버스를 타요?' 직원을 제일 곤란하게 하던 질문
직원들이 가장 난감해하던 문의. 또 셔틀버스를 이용하시던 분들의 불만...을 개선했다.
같은 춘천에 살아도 어느 정류장에서 타야 하는지는 동네마다 다르다. 전화로 동네 이름만 듣고 가장 가까운 정거장을 짚어드리는 일이 매번 쉽지 않다. 그래서 사는 곳을 입력하면 가까운 셔틀버스 정거장을 안내해 주는 기능을 개발했다.
평생교육 프로그램 안내도 개선해보았다. 기존에는 담당자가 홈페이지에 수강과목과 요일별, 강의실별 데이터를 매번 등록해야 했는데, 이제는 평생교육프로그램 통합관리시스템의 자료를 홈페이지와 실시간으로 연결하고, 요일별·시간별·강의실별로 골라 볼 수 있게 했다. 화요일 오후에 어떤 프로그램있는지, 배움2실에서는 어떤 강의가 진행되는지 , 강의실은 언제 비는지를 한눈에 파악할 수 있다.
사업안내 페이지의 접근도 아예 바꿨다. 소개 글을 따로 쓰지 않고 갤러리 자료를 참고하여 갤러리 게시판에 게시된 내용을 AI가 분석해 사업을 소개하고, 최근 활동 사진이 함께 취합되어 나오도록하여 소개 글들도 최신화하기 쉽도록 설계하였다.
알림기능도 새로 넣었어요. 회원으로 가입하면 관심 게시판에 새 글이 올라올 때 알려주고, 조회수 1위였던 식단은 매일 아침 9시에 받아볼 수 있도록하였다. 이 알림신청 내역을 통해 발행되는 웹매거진이나 다양한 소식도 쉽게 확인할 수 있게 하였다.
아직 고민중인 것들도 있다. 안드로이드 앱을 만들어 배포를 준비 중인데, 앱 알림과 겹칠 것같다. 지금은 홈페이지 알림 쪽으로 기울어 있지만, 앱이 나오면 테스트하며 다듬어 가야할 것같다.
여기서 왜 안드로이드만 만드냐, 애플은 안만들고? 라고 질문을 하신다면 애플은 등록비, 개발비 뭐... 이런것들에 비용이 추가로 드는 것으로 알고 있다. 우리는 예산이 없다. 그래서 한번 개발자로 등록해놓으면 앱을 개발하여 플레이스토어에 등록할 수 있는 안드로이드만 개발하고 있다.
번거로운 일을 한곳으로 모으면 생기는 여유
직원 입장에서 가장 크게 바뀐 곳은 채용과 웹매거진이다.
과거에는 이메일로 접수를 받았다. 메일을 확인하기 어려울 수도 있고, 경우에 따라 스팸으로 보내와지는 입사원서도 있다. 빠진 서류를 체크하고 다시 요청하고, 출력하고, 정리하고... 꽤번거로운 작업이다. 이제 그 과정을 하나로 모았습니다. 공고는 법인 ERP에서 추가 등록하고, 그 내용이 복지관 홈페이지에 해당 수탁기관의 홈페이지에 노출되게 된다. 지원자가 온라인으로 접수하면 접수 내역을 다시 ERP에서 확인한다. 우선 이렇게 만들자마자 실제 테스트 할 수 있도록 지원한명이 퇴사를 했다...ㅡ.ㅡ;;
그래서 또 몇가지 버그(?)를 수정하고 기능을 개선하였다.
웹매거진은 홍보 담당을 해보신 사람이라면 바로 알 수 있을 것이다.
매월 소식을 취합하고, 구성하고, 만들고, 배포하고. 정말 고된 일이다.
그래서 자동화했어요.
- 복지관 소식, 언론보도, 후원보고, 모금안내 네 영역이 매달 자동으로 취합되어 하나의 페이지로 만들어지도록 한다.
- 홍보 담당자는 만들어진 결과물을 검토한다
- 홈페이지 관리 페이지에 접속하여 소식지를 받고자 요청한 대상자에게 이메일과 알림 메시지를 발송한다.
- 모든 명단과 기안작성에 필요한 자료들은 PDF파일로 생성되어 담당자가 내려받을 수 있도록 한다.
그 밖에도 직원에게 도움이 될 기능을 곳곳에 심었어요. 게시글을 올리면 원하는 형태로 글을 정리해 주는 기능, 그 글을 분석해 홍보물을 만들어 주는 기능, 게시물을 분석해 첫 화면 배너를 만들어 주는 기능. 후원자 정보만 제대로 넣으면 감사서신과 후원약정서가 자동으로 만들어지기도 하고요.
후원 페이지는 조금 다르게 접근해보았다
후원관련 페이지도 기능개선을 해보았다.
담당자가 법인 ERP에 후원 사용 내역을 등록하면 홈페이지에 후원 수입 사용 내역이 투명하게 공개되고, 후원자는 후원내역 확인 페이지에서 자신이 후원한 내용을 직접 볼 수 있도록 하였다.
사회복지법인 및 사회복지시설 재무·회계 규칙 제41조의6은 결산보고서를 낼 때 후원금 수입·사용결과보고서를 함께 제출하고, 그 내용을 기관 게시판과 인터넷 홈페이지에 3개월간 공개하도록 정하고 있다. 바꿔 말하면 법이 요구하는 최소치는 1년에 한 번, 봄에 한 차례라는 뜻이지만 우리는 모든 내용을 후원자분들에게 투명하게 공개하고 있다.
이렇게 있는데이터를 그대로 사용할 수 있는 것도 우리 기간와 후원금품 사용을 투명하게 하고 있기에 가능한 일이다.
잘 만들어도 안 쓰면 0점, 기관방문과 대관신청
아무리 좋은 기능도 쓰는 사람이 없으면 가치는 0이다.
홈페이지가 딱 그렇다. 큰 예산을 들여 멋지게 만들어도 새 글이 등록하지 않고 과거에 머물러 있으면 홈페이지가 별볼일 없어진다. 기관방문 신청과 대관신청 기능이 그렇다. 필요하다고 해서 열심히 고민하여 만들어 놓았는데, 담당자들이 사용하지 않고 엑셀에 아직 취합하고 있다. 그래서 매번 물을 때마다 언제 어디서 어떻게... 를 한참(?) 찾다가 알려준다.
여기에 올려놓고 사용하면 바로 확인할 수 있을 텐데...
그래서 없앨까 고민도 했다. 그래도 만드는 김에 다시 한번 만들어보았따. 날짜별로 신청할 수 있게 꽤 공을 들인 페이지라, 이번엔 담당자들이 잘 써주면 좋겠다.
비슷한 곳이 한군데 더 있는데 예전에 따로 떼어 만들어 뒀던 충열로124 카페 홈페이지를 이번에 안으로 들여왔습니다. 밖에 있으니 방문자가 더 없는 것 같았다. 옮기고 나서 방문자가 소폭 늘어난 것을 확인할 수 있었다.
의도치 않은 급한 홈페이지 오픈
아직 더 많은 기능을 추가하고 개선해서 홈페이지를 오픈하고 싶었으나, 홍보담당자가 보완서버를 결제가 늦어져 홈페이지 접속에 문제가 생겨, 급하게 리뉴얼중인 홈페이지를 바로 오픈하게 되었다.
많은 고민과 기능개선을 적용한 홈페이지인 만큼. 많은 분들이 잘 사용해주길 바란다.
다만, 혼자 만들어온 부분이 있기에 당연히 버그도 발생할 수 있고 부족한 부분도 있을 수 있으니 이런 부분 발견하신 분들은 제보해주시면 좋겠다.
