← 만든 것 01/13·단체

단체·inuim.pe.kr

인천도시산업선교회

노동선교 60년을 담는 비영리단체 홈페이지

큰 글씨로 한눈에 읽히는 첫 화면과 후원 전광판, 네 묶음으로 정리한 소개, 화면에서 채우는 후원 신청서, 공모사업 결과보고 사이트까지 — 활동가가 화면 위에서 직접 고치는 비영리단체 홈페이지 사례.

인천도시산업선교회 실제 화면
화면 01·첫 화면 — 옛 사진이 오래된 TV 화면처럼 넘어간다 inuim.pe.kr
01

과제

인천도시산업선교회(인천산선)는 1961년부터 인천 지역 노동자와 함께해 온 노동선교 단체입니다. 홈페이지를 찾는 사람은 오랜 회원과 후원자, 활동을 함께하는 시민, 공모사업을 맡긴 재단까지 다양합니다. 글씨가 크고 한눈에 읽히는 첫 화면, 후원과 회원가입이 헷갈리지 않는 길, 그리고 활동가가 직접 소식을 올릴 수 있는 구조가 필요했습니다.

02

만든 것

첫 화면은 산선의 옛 사진이 오래된 TV 화면처럼 차례로 넘어가고, 그 위에 표어 「약한 것을 강하게!」를 판화 느낌의 전용 글씨로 올렸습니다. 제목마다 밑줄이 그어지다 끝에서 촛불이 켜집니다.

홈 한 화면에 단체의 지금을 모았습니다. 소개 바로가기, 정기 후원 구좌와 이달 후원을 보여 주는 전광판과 함께해 주신 분들의 이름이 흐르는 줄, 다가오는 일정·공지사항·언론보도, 최근 활동 기록 사진, 제물포 둘러보기 숫자판(누르면 목록과 지도), 오시는 길까지 이어집니다.

소개는 「산선은 · 걸어온 길 · 조직과 정관 · 함께하기」 네 묶음으로 나눴습니다. 연혁은 시대별 탭으로 넘겨 보고, 역대 총무는 사진 카드에서 약력을 펼쳐 보며, 정관은 장마다 접고 펼칩니다.

후원은 「한 번 후원 · 매달 후원 · 회원 되기」 세 갈래 중 하나를 고르면 됩니다. 매달 후원은 효성 CMS 서면동의서를 화면에서 그대로 채우고 손가락으로 서명해 신청서를 만들 수 있고, 온라인 CMS 신청으로 바로 가는 길도 함께 둡니다. 「영수기」에는 받은 후원을 받은 대로 적어 둡니다.

공지사항과 언론보도는 표로 정리해, 언론보도는 누르면 그 기사로 갑니다. 갤러리는 사진만 크게 넘겨 보는 띠로 만들었습니다.

공모사업 「시민✕ 노동역사문학기행」은 재단에 내는 결과보고 사이트로 따로 세웠습니다. 성과 숫자, 시민기획단 일지, 회차별 기행 기록과 웹자보, 참가자 후기, 결과물을 한 쪽에 담고, 이름표·메뉴·꼬리말도 그 사업 것으로 바꿨습니다.

이 모든 내용은 관리 모드에서 보고 있는 화면 위에서 바로 고칩니다. 활동 소식을 올리고, 홍보할 글은 🏠 하나로 홈 활동 기록 맨 앞에 세웁니다. 스캔한 옛 회의록·소식지는 AI가 제목·날짜·주제를 분류해 뜻으로 찾을 수 있는 아카이브에 쌓입니다.

03

결과

Firebase(Hosting·Firestore·Functions·Storage) 백엔드를 포함한 전체 인프라와 도메인이 인천산선 명의로 남아, 외부 업체에 종속되지 않고 직접 소유·운영합니다. 방문객 댓글·공감·조회수까지 실제로 작동하는 상태로 라이브 서비스 중입니다.

비영리단체 홈페이지 제작 · 후원 신청 · 라이브 편집 · 노동선교

비슷한 것을 만들고 싶다면

프로젝트 상담 상담과 견적은 무료입니다. 첫 만남은 직접 뵙고 시작합니다.
카카오톡 상담