역사학 연구자료의 홈페이지를 만들려고 하는데, 어떤 것을 준비해야 할까...

1. 들어가기

  보통 콘텐츠에는 내용과 형식을 갖추고 있습니다. 동영상 콘텐츠를 보자면, 우선 파일 확장자로 그 형식이 구체화되며 플레이어를 통해서 내용을 전달받을 수 있게 됩니다. 홈페이지도 마찬가지입니다. 홈페이지의 형식은 크게 메뉴구조(이걸 홈페이지를 전문적으로 개발하는 곳에서는 GNB - General Navigation Bar - 라고 하기도 하고 UI - User interface라고 하기도 합니다.)와 그 메뉴구조를 통해 얻을 수 있는 콘텐츠, 즉 내용으로 나눠볼 수 있습니다.

  그런데, 정작 홈페이지 중 형식에 치우쳐져 내용을 담지 못하고 있는 곳이 많습니다. 예전과 달리 지금의 홈페이지 제작기술은 놀랄 만큼 발전되어 있습니다. 비교적 정적이던 홈페이지는 자바기술이 도입되고, 플래시나 실버라이트 등이 나오면서 역동적인 모양을 갖추게 되었습니다. 동적(動的)기술의 발달로 화려한 홈페이지들이 많이 생겨나고 있습니다만, 정작 콘텐츠는 빈약한 곳들이 많습니다. 이런 곳들은 이용자들의 체류시간이 떨어지고, 한번 방문하고 마는 홈페이지가 되기 쉽습니다. 그렇기 때문에 콘텐츠의 비중을 많이 두어야만 합니다. 특히, 특정 자료를 제공하고 이용자들과의 상호작용(interactive)을 중시하는 홈페이지의 경우 초기 콘텐츠 및 향후 업데이트 되는 콘텐츠에 많은 신경을 써야 합니다.

  이번 답변에서는 전문적인 기술영역(디자인이나 코딩)이 아닌 설계단계에서 신경써야 할 부분에 대하여 몇가지 조언을 하고자 합니다. 일반적인 홈페이지의 경우 범위가 넓어지기 때문에, 역사학 연구자료 또는 인문학콘텐츠 홈페이지로 그 영역을 줄여 보았습니다만 일반적인 내용이 많기 때문에 소규모의 회사 홈페이지나 홍보용도의 홈페이지 제작에는 비슷한 내용이 많습니다.

 

 

2 .제작영역의 산출물들

  이 장은 간과하기 쉬운 홈페이지 제작영역이 산출물들에 대하여 이야기 해보고자 합니다. 홈페이지도 여러 사람(기획, 디자인, 프로그래머)이 공동작업을 통해 이뤄지는 부분이다 보니 생각보다 많은 설계문건이 필요합니다. 설계문건은 다음의 표와 같이 여러 가지가 필요합니다. 복잡하고 규모가 클수록 더 많은 설계문건이 있습니다. 이번 답변에서는 연구자료의 게재가 주 목적인 홈페이지이기 때문에 비교적 적은 편입니다.

  혹, 홈페이지 제작과 관련된 직업을 갖기 위해 공부하신 분이라면 검색을 조금 더 하셔서 실제 문서 내역을 확인해 보시기 바랍니다. 홈페이지, 즉 웹개발은 일반적인 IT에 비해 탄력성이 좀 커서 문서명이나 내용이 약간씩 다를 수 있습니다.

 

구  분	단위 업무	내용
요구사항 분석 및 기획	기초 및 현업 분석	프로젝트의 업무범위를 결정하고, 필요자원 등을 결정짓습니다.
	요건 정의	완성된 홈페이지에 대한 의견을 토대로 요구사항명세서(분석서)를 작성하는 단계입니다.
	자료수집 방안	홈페이지에 올릴 콘텐츠를 선정하고 수집이나 집필에 대해 확정합니다.
	세부 추진방안 협의	이 단계가 끝나면 대개 WBS나 일정표등을 작성합니다.
자료수집 및 DB구축	XML 스키마(schema) 수집	XML로 자료를 처리할 경우 스키마를 작성합니다. 이 부분은 개발자 또는 개발설계(기획)자의 도움이 필요합니다.
	텍스트 콘텐츠 파일 수집	이미 완성된 텍스트 자료를 수집한 후 정형화 합니다.
	멀티미디어 파일 수집	상동
	일반 자료 수집	콘텐츠가 아닌 부가자료 등을 수집합니다. 대개 홈페이지를 관리할 단체의 소개자료를 수집하고, 이용약관 등 홈페이지 운영에 관한 자료를 수집합니다.
	DB 업무분석	자료의 수집이 끝난 후 데이터베이스로 처리할 내역을 분석합니다.
	DB 설계	분석작업이 완료되면 DB를 설계합니다. 대개 물리, 논리 ERD를 작성합니다. DBA 역할을 할 사람이 없을 경우에는 일단 화면에 구성할 목록을 스케치 해 둡니다.
	프로그래밍(DB 관련)	이 부분은 본격적인 코딩전에 데이터의 균질화를 통한 가용성을 높이는 작업입니다. 데이터가 많을 경우에는 일일이 수작업으로 진행하는 것보다, 간단한 프로그래밍 작업을 통해 데이터의 유효성을 높이는 작업을 하는 게 편합니다. 데이터이 오염도가 심한 경우에는 어쩔 수 없이 사람의 손을 빌려야 하지만요...
	DB입력	콘텐츠의 입력은 엑셀파일로 셀을 나누어 작업하거나, 위에서 작업한 입력 툴을 이용하여 작업합니다. XML 데이터를 작업할 때는 XML코딩 작업을 진행합니다.
설계	기획 설계	설계에 넘어오면 본격적으로 시각화된 자료들을 각 파트에서 생산해 내기 시작합니다. 즉, 이전의 산출물이나 작업영역들이 추상적이었다면, 설계단계에서부터는 본격적으로 화면을 설계하고, 디자인을 구축해 나가며 프로그래머들은 프로토타입을 준비해야 합니다.
	디자인 설계	디자이너와 개발자들이 놓치기 쉽거나, 또는 회사 내에서의 문화가 그런지도 모르지만 본인이 작업할 내역을 머릿속에서만 놓고 실제로 문서 작업을 안한다는 겁니다. 가시화작업 이전에 항상 머릿속에 아이디어를 꺼내는 걸 해보시기 바랍니다.
	System 구조 설계	하드웨어적인 설계일 수도 있고, 디렉토리 구조 일 수도 있습니다. 각각의 폴더의 정책(예를 들어 데이터가 많은 경우 폴더당 1,000개 이하만 쌓이도록 한다 등)을 결정합니다. 또한 이 과정에서 AS-IS분석서나 개발환경정의서를 같이 작성하면 좋습니다.
	개발 설계	개발 설계는 코드정의, 프로그램명세서 등을 작성합니다. 물론 작은 규모에서는 그리 필요하지 않지만, 현재 배우는 입장이시라면 텍스트로 구체화 시키는 작업을 병행하시면 나중에 많은 도움이 됩니다.
구현	프로그래밍	실제 작업을 진행합니다. 파일이나 폴더는 명명정의서 등을 참조해서 해야 합니다. 공동작업시 파일의 의미가 통해야 작업이 원활합니다.
	디자인 & 코딩
테스트 및 개발수정	테스트 설계	테스트 설계는 설계단계 이후 기획자들이 담당해야 합니다. 테스트는 시기적으로 알파, 베타로 나누기도 하고 점검범위에 따라 단위, 통합으로 나누기도 합니다. 통합테스트를 시나리오테스트라고 부르기도 합니다.
	알파 테스트
	마이그레이션
	베타 테스트
	서비스 내부오픈
	시범 서비스

 

 

2.1. 분석

  단계별로 좀 쪼개서 살펴보도록 하겠습니다. 크게 4개의 영역중 첫 번째는 “분석”입니다. 이미 단어에서 느끼는 의미를 파악하셨겠지만 이번 단계는 흔히 이야기 하는 6하원칙에 대한 답을 구하는 것입니다. 언제(작업기간), 어디서(작업공간 및 작업이후 가시화되는 공간, 즉 개발환경), 누가(개발하려는 사람과 이를 실행하는 사람), 무엇을(홈페이지의 주제), 어떻게(기능 및 디자인), 왜(목적성에 대한 부분. 이는 사소한 범위라고 착각할 수 있지만 실은 이 목적성이 전반적인 Key입니다. 목적에 따라 다른 것들이 바뀔수 있기 때문이죠)를 구체화 시켜야 합니다. 그것이 분석단계입니다.

  따라서 분석단계를 마치면 홈페이지의 시작과 끝을 알 수 있어야 됩니다. 이른바 베이스 맵 또는 베이스라인이라고 하는데요, 이걸 알수 없거나 모호하면 분석단계가 제대로 진척되지 않았다고 보아야 합니다. 대개 작은 규모의 기업(또는 프로젝트)에서는 대부분 PM이나 기획자가 이 업무를 진행하며 비중을 매우 낮출수도 있습니다만, 규모가 점점 커질 수록 “분석”단계는 중요성도 높아지지만, 업무 비중도 매우 높습니다.

 

단계	세부항목	산출물	비고
착수	수행계획	사업수행계획서 or 과업내역서	앞서 이야기 했던 6하원칙의 내용이 들어가야 합니다.
분석	현업/서비스분석	요구사항분석서	학회의 홈페이지라면 각 분과위원회의 대표자들에게 요구사항을 수렴하고, 외부용역을 수행하시고 계시다면 고객의 요구사항을 파악하면 되겠습니다.
		벤치마킹보고서	유사한 홈페이지를 분석하고, 좋은 기능이나 디자인은 벤치마킹합니다.
		회의록
	업무요건정의	기능명세서	요구사항에서 나왔던 부분을 상세화 시키는 부분입니다.
		프로그램명세서	기능명세서 중 프로그램을 개발해야 하는 부분에 대하여 상세화 합니다. 이 문서는 글로 만드는 프로그램으로 보면 됩니다.
	시스템/개발분석	개발환경정의서	서버나 홈페이지의 유지보수를 위해 필수적인 정보를 기입합니다. 예를 들어 서버의 접속정보 및 관리자의 비상연락망등을 기록합니다.

 

 

2.2. 설계

  분석단계에서 산출물로 나온 문서들을 중심으로 본격적인 설계에 들어갑니다. 화면설계, 디자인 프로토타입(시안), DB설계, 프로그램기획안(설계서), 코드설계 등이 진행됩니다. 이 때부터 본격적으로 개발이나 디자인 파트에서도 참여가 시작됩니다. 설계에서는 분석단계에서 도출된 베이스맵(Base Map)을 중심으로 시간, 투입인력, 자금등이 배분되기도 합니다. 설계에서 주로 나오는 산출물은 아래와 같습니다. 우리가 흔히 아는 건축설계서가 나온다고 생각하면 됩니다. ‘정보구조설계’파트가 끝나면 제너럴한 부분은 어느정도 끝나게 됩니다. 따라서 이후 단계부터는 스페셜한 업무이므로, 이 문서를 읽고 계신 분이 그러한 능력이 없다면 눈요기로 보시는 것도 좋겠습니다 .

단계	세부항목	산출물	비고
설계/개발	정보구조설계	사이트구조도 페이지구조도	이칭 ; 사이트맵 이칭 : 화면설계서
	디자인설계	디자인가이드	디자인 가이드는 나중에 디자인 수정을 위하여 색상표 및 사이즈 등을 기록합니다.
	개발설계	DB설계서(물리, 논리 ERD) 디렉토리구조도 클래스정의서	DB테이블명세서 프로그램 번호추정

 

 

2.3. 구현

구현단계는 앞선 설계단계의 내역들이 실제 개발 및 디자인이 일어납니다. 구현단계에서 문서로 작업해야 되는 것은 아마도 보고서, 회의록 정도 일 듯 하네요.

 

 

2.4. 테스트 및 완료단계

  테스트 및 완료단계는 개발이 완료되어 시험을 한 후, 완료단계에 진입합니다. 전체 공정에서 이 테스트 단계가 차지하는 비중은 꽤 높습니다. 규모가 클수록 기간 및 투입인력이 상당히 많게 됩니다. 그 만큼 중요하다는 것이지요. 저는 예전에 PM으로 외부 홈페이지 작업을 하게 되었을 때 분석 10%, 설계 30%, 구현 30%, 테스트 25%, 완료 5%로 작업을 하곤 하였습니다. 왜냐하면, 구현이 완료되어 정상적으로 돌아야 할 홈페이지들이 기초테스트(보통 개발자 그룹에서 1차테스트인 기초테스트를 진행하며, PM이나 PL들이 2차 테스트를, 그리고 QA나 QC들이 최종테스트를 하게 되는데요.. 첫 번째 테스트를 의미합니다.)

 

단계	세부항목	산출물	비고
테스트	테스트	테스트계획서 테스트보고서	시기적으로 나누어 진행하거나, 범위에 따라 나누기도 합니다.
완료	매뉴얼작성	사용자매뉴얼 운영자매뉴얼
	개발완료산출물제출	완료보고서 디자인소스 개발소스

 

 

 

3. 무엇을 담을 것인가?

틀에 대한 이야기를 너무도 많이 해 버렸네요. 그럼 이제 틀에 담길 내용에 대해서 이야기 해 보도록 하겠습니다.

 

3.1. 타겟별 정보제공

  홈페이지를 찾는 사람들을 나눠보면(타켓층) 실어야 될 정보의 구체화는 나름 쉬워질 수 있습니다. 물론, 정보 제공을 위한 수집이나 편집은 매우 까다롭지만 그건 나중에 고민하도록 해 보죠. 이 질문의 핵심은 “역사학 연구자료”의 홈페이지입니다. 역사학 연구단체의 홈페이지가 아닌 이상 기본적으로 방문자들에게 역사관련 정보를 제공해야 합니다. 제1타겟은 자료를 구하러 오는 연구자들 일 것입니다.

  두 번째는 아마도 해당 연구단체의 정보를 가지러 오는 사람들일 것입니다. 네트워크 형성을 위한 정보 획득이 목적일 가능성이 높습니다. 따라서, 소속 연구원들에 대한 정보(개인정보의 개방의 정도는 내부에서 정해야 하겠죠?)와 기본적인 단체 정보, 주소, 전화번호 등이 오픈되어야 합니다.

  세 번째는 단체와 연관된 사람들도 상당할 것입니다. 위의 첫 번째, 두 번째 타겟층에 대한 정보가 없을 경우에는 관련자들만의 폐쇄된 홈페이지가 될 가능성이 농후합니다. 따라서, 외부 인들에게 정보제공의 의지가 없다면 아예 처음부터 로그인 페이지를 띄우는 것도 좋은 방법입니다. 간혹, 단체 소개만 오픈되어 있고 자료실 등은 아예 공개를 하지 않고 회원가입도 안받아주는 홈페이지들이 있는데, 이런 홈페이지들을 볼 때 마다 왜 볼 수 없는 정보를 오픈되어 있는 것처럼 표기했는지 울화가 치밉니다.

  마지막으로는 검색엔진을 타고 들어오는 1회성 방문자들도 있습니다.

 

 

3.2. 오픈형 홈페이지 구성

  폐쇄형 홈페이지는 지양해야 하기 때문에, 오픈형 홈페이지 구성에 대해서 살펴보도록 하겠습니다. 실제 개발에서는 스페셜리스트들(디자이너, 개발자)의 도움이 필요하기 때문에, 이 부분 전까지만 작업을 해보도록 하겠습니다.

  먼저, 홈페이지의 뼈대를 이루는 메뉴구조(사이트 맵)를 한번 만들어 보겠습니다.

  (트리구조의 사이트 맵)

  트리구조는 가장 일반적인 형태로 구조를 쉽게 파악할 수 있습니다.

 

(버블형태의 사이트 맵)

 

  버블형태는 트리구조에서 약간 변형된 구조로 보기에도 편하고 디자인만 조금 더 입히면 매우 효과적입니다. 하지만 하위단계가 많아질수록 이 2가지의 단계는 한계가 있기 마련입니다. 홈페이지에서 단계별 맵은 일종의 계서구조(階序構造 : hierarchy)이기 때문에 위와 같은 닫힌 구조보다는 열린구조가 훨씬 보기가 편하게 됩니다.

 

(하위 단계를 계속 추가시킬 수 있는 방식으로도 사이트맵을 만들어 보세요)

 

 

3.3. 메뉴별 콘텐츠 구성

  각각의 메뉴가 정해졌으므로 메뉴별 실어야 할 콘텐츠와 접근할 수 있는 것들을 규정해 보도록 하겠습니다.

 

1Depth	2Depth	내용	접근
학회소식	공지사항	게시판 형식으로 관리자만 입력가능하다.	All
	이달의 일정	달력형태로 구성되어 있으며, 해당 달력의 행사를 클릭하면 팝업으로 일정을 보여준다.	All
	학회구성원	학회구성원들을 소속된 위원회별로 나누어 이름, 소속, 이메일 등을 공개한다.	All
학술대회	행사일정	전국 학술대회 행사일정을 게시판 형태로 나열한다.	All
	참여신청	참여신청이 허락된 행사일정은 게시물 내에 “참여”버튼을 두고 팝업으로 참여신청을 받는다.	Only Member
회원서비스	회원자격	회원자격 안내문. 신청서 다운로드	All
	회비납부 안내	회비납부 안내문	All
	회원가입	온라인 회원가입.	All
	정보수정	자기정보 수정 페이지	Only Member
원고투고	투고규정	원고(논문)투고내용	All
	심사규정	심사 규정 안내 페이지	All
	온라인투고	온라인 상의 원고 투고 페이지. 게시판 업로드 기능	Only Member
	심사결과	심사 결과 페이지	Only Member
	논문열람	심사를 통과한 논문을 보는 페이지	Only Member
자료실		학회 자료 게재. 저자가 공개를 허락한 논문	All
학회소개	인사말	현 회장단 인사말 페이지	All
	연혁	연혁 페이지	All
	조직 및 위원회	산하 위원회 및 위원장 안내 페이지	All
	회칙	회칙 페이지. 다운로드 가능	All
	연락처	Offline 연락처 및 웹 관리자 연락처	All
	오시는 길	약도	All

 

  이처럼 메뉴를 정하고 들어간 콘텐츠를 규정하는 것은 그리 어렵지 않습니다. 따라서, 학회나 연구단체등에서 홈페이지를 만들 때 주도적인 위치에 있는 사람이라면 내부의 다른 사람의 의견을 정리해서 사이트 맵을 만들어 보면 시간과 인력투여를 최소화할 수 있습니다.

 

 

3.4. 무엇을 보여줄 것인가?

  역사학 연구자료는 대개가 논문이나 기고문 형식일 것입니다. 이 전문적인 연구자료는 일반인들에게 너무 어렵거나 봐도 잘 모르는 내용이 많이 있을 것입니다. 따라서, 이 자료를 오픈하는 것은 저자의 동의를 얻으면 매우 쉽게 풀리는 일입니다. 일각에서는 오늘날 DBpia나 Kiss같은 전문적인 연구자료 DB에 등록되어 다운로드 비용을 받을 수 있는데 굳이 오픈할 필요가 있겠냐고 합니다만, 이것은 말 그대로 소탐대실일수 있습니다. 대부분의 연구자들은 대학 또는 연구소에서 이들 유료 DB에 맘대로 접근할 수 있는 권한이 있습니다. 심지어 학부생들에게까지 무료로 개방하는 대학도 많습니다. 따라서, 통제에 따른 수익은 매우 미미할 뿐입니다. 이러한 추세로 인해 오늘날은 대부분 연구학회에서는 자료를 오픈합니다.

  또 이야기가 빙빙 돌았습니다만, 학회라면 정기적으로 인쇄하는 학회지를 PDF형식으로 올려 놓는 것이 가장 이상적입니다. 두 번째는 학술대회에 있었던 토론회를 정리하셔서 올리는 것도 매우 좋은 방법입니다.

마지막으로는 연구자료의 부산물들, 즉 사진(탁본 포함)이나 인터뷰 자료, 학회 토론회 영상물등이 좋은 자료가 될 수 있을 것이라 생각됩니다.

  이러한 자료를 초기에는 자료실 형태로 운영할 수 있으며, 양이 많아 질수록 전문을 홈페이지상에서 다운로드 없이 바로 볼 수 있도록 해 두는 방법이 필요합니다.

 

 

3.5. 많은 양의 자료를 보여줘야 할 때

  콘텐츠의 양이 많을 경우에는 검색과 디렉토리구분의 편의성을 위하여 메타데이터를 만들어 주어야 합니다. 좀 풀어보자면, 수백건의 데이터를 DB에 넣게 되면 최종파일이 태깅(HTML이던 XML이던)상태이건 바이너리파일(흔히 이야기 하는 한글파일, word파일)이던 검색을 용이하게 하는 부분을 만들어야 하는데 이걸 메타데이터(Meta data)라고 하는 것입니다.

  메타데이터의 작성과 관련되어서는 국가지식포털 knowledge자료실에서 표준지침을 다운로드 하시면 이해가 빠를 수 있습니다. (https://www.knowledge.go.kr/jsp/intro/intro14_view.jsp?pdsId=171%20%20%20%20%20%20&currentPage=1)

  이처럼 메타데이터를 작성하면, 추후 데이터 관리 및 서비스 확장에 매우 유연하게 대처할 수 있습니다.

혹 어려워 하시는 분들을 위해 『디지털성남문화대전』의 메타데이터를 캡처해 보았습니다. 그림 상단부의 표가 메타데이터입니다. 그림처럼 부가정보를 콘텐츠에 삽입하거나 또는 게시판일 경우 게시물 내역에 정리해 두면 이용자가 검색할 때 많은 도움을 받게 됩니다.

  (디지털성남문화대전의 메타데이터)

 

 

4. 디자인 템플릿 구매 - 글을 마치며

  마지막으로는 디자인 템플릿 구매에 대한 부분을 언급하면서 마치도록 하겠습니다. 대개 고리타분한 연구자료의 홈페이지 들은 디자인에 많은 신경을 안쓰게 됩니다. 대부분이 개인이거나 학회, 단체들이기 때문인데요, 이중 포털의 블러그나 카페를 이용하게 되면 그나마 정돈된 레이아웃에 깔끔해 보이지만, 그렇지 않은 곳들은 투박하거나 몇 년째 디자인에 손을 안본 경우가 많습니다.

  추측해 보건데 디자인적인 추가작업을 진행하지 않았거나, 처음부터 개발자 손에서 탄생한 홈페이지의 경우이겠지요. 홈페이지 디자인의 템플릿을 판매하는 사이트들은 굉장히 많고 가격도 3~10만원대로 선택의 폭이 넓습니다. 보기 좋은 떡이 먹기도 좋은 법이죠. 아무리 좋은 정보를 가지고 있더라도 요즘말로 디자인이 “안습”이면 사람들의 방문이 그리 많지는 않을 것입니다.

  이상으로 역사학 연구자료를 전시하기 위한 홈페이지 만들기에 대한 답변을 마치겠습니다. 나름 고민하고 글을 쓰다보니 원래 계산보다 약 2배나 더 많은 시간이 소요되었는데도 실질적인 내용이 충실한지는 잘 모르겠습니다. 다만, 이 글이 일반적으로 소규모 홈페이지 제작에도 유용할 것이라는 믿음으로 글을 마치겠습니다.