「한 세기를 걷다」
2023년 9월 2일에 열린 100주년 개교기념식의 이름입니다. A안은 걷는다는 말을 홈페이지의 스크롤로 옮겼습니다. 아래로 내릴수록 연도가 올라가고, 페이지 끝에 다다르면 2023년과 그다음 100년에 도착합니다.
1923. 9. 1. 대구
대구의학강습소가
처음 문을 열었습니다
경북대학교 의과대학 100주년 · 홈페이지 리뉴얼 제안
기념식의 이름을,홈페이지의 걸음으로
「한 세기를 걷다」 · 「생명을 향한 100년의 빛」
두 가지 방향과 그 과정을 담았습니다
01 / OVERVIEW프로젝트 개요
1923년의 강습소에서
9,057명의 동문까지
경북대학교 의과대학은 1923년 대구의학강습소에서 출발해 2023년에 개교 100주년을 맞았습니다. 지방에 설립된 국내 최초의 국립 의과대학으로서, 한 세기 동안 9,057명의 동문을 길러 냈습니다.
블루캔버스는 100주년 사이트를 새로 설계하는 두 가지 방향을 제안했습니다. 기념식의 이름을 스크롤의 걸음으로 옮긴 「한 세기를 걷다」와, 유리로 빚은 심장으로 생명을 향한 마음을 그린 「생명을 향한 100년의 빛」입니다. 이 페이지에는 두 시안이 나오기까지 고민한 내용과 과정을 정리했습니다.
- 1923대구의학강습소 개소
- 1002023년, 개교 100주년
- 9,057한 세기 동안 길러 낸 동문
- 2제안한 리뉴얼 방향
02 / STARTING POINT출발점
- 1메뉴는 네 묶음, 페이지는 열한 개입니다.
- 2첫 화면에는 보도자료 세 건과 배너 세 장이 있습니다.
- 3100년의 사진과 유물은 「History 100 › 지난 100년」 안에 있습니다.
FOUR QUESTIONS
리뉴얼은
네 가지 질문에서 시작했습니다
- Q1첫 화면에서 100년이라는 시간이 전해질까요?
두 시안 모두 첫 화면을 스크롤로 재생되는 필름으로 만들었습니다. A안은 심전도의 한 박동에서 NEXT 100까지 10초 동안 걷고, B안은 유리 심장에 빛이 도는 8초 영상을 스크롤에 맞춰 움직입니다.
- Q2서브 페이지에 있던 사진과 유물을 첫 화면으로 꺼낼 수 있을까요?
연표를 가로로 넘기는 장면을 메인 페이지에 두고, 유물 여덟 점은 배경을 지워 서랍에서 하나씩 꺼내듯 보여 주기로 했습니다.
- Q3행사가 끝난 뒤에도 다시 찾아올 이유가 있을까요?
지난 행사 일정보다 100주년이 남긴 조형물과 기념관, 100년사를 앞에 두고, 기금 모금과 자료 기증 안내를 페이지 끝까지 이어 두었습니다.
- Q4동문이 휴대폰으로 열어도 같은 감동이 전해질까요?
필름을 세로 화면용으로 따로 렌더링하고, 가로로 넘기던 장면은 세로 화면의 길이와 글자 크기에 맞춰 다시 정리했습니다.
03 / VISITORS & ROUTE방문자와 동선
행사가 끝난 뒤
이 사이트를 여는 사람은
네 부류라고 보았습니다
기념주간이 지나면 행사 일정을 확인하러 오는 사람은 줄어듭니다. 대신 학교의 역사를 다시 보려는 동문, 기금에 참여하려는 기부자, 자료를 찾는 기자처럼 오래 머무는 방문자가 남습니다. 방문자마다 도착할 장면을 먼저 정했습니다.
- 01동문
기념식 사진과 동문 소식을 다시 보고, 기금에 참여하는 방법을 찾습니다.
기념주간 · 100Fund - 02재학생과 교직원
학교가 걸어온 길과 교정에 남은 기록을 확인합니다.
지난 100년 · 시간의 서랍 - 03기부자와 후원 기관
기금이 어디에 쓰이는지, 참여하면 어떤 예우가 있는지 살펴봅니다.
100Fund - 04언론과 지역 사회
보도자료와 행사 기록, 영상 자료를 찾습니다.
100주년 소식
메뉴 네 묶음을
한 번의 산책으로
지금의 사이트는 메뉴 네 묶음과 페이지 열한 개로 나뉘어 있습니다. A안은 이 내용을 메인 페이지 하나에 열두 개의 장면으로 이어, 위에서 아래로 내려가기만 해도 100년의 기록을 차례로 지나가도록 했습니다. 왼쪽의 기존 페이지가 오른쪽의 어느 장면으로 옮겨 갔는지 선으로 이었습니다.
100th Anniversary
- 인사말
- 보도자료
- 뉴스레터
- 주요행사 및 활동
History 100
- 지난 100년
- 미래 100년
100주년 기념주간
- 기념주간
- 조직구성 원래 페이지로 연결
- 일정 및 프로그램
- 자료기증
100Fund
- 기금모금
- 01한 세기를 걷다스크롤로 재생되는 10초 필름새로 만든 장면새 장면
- 02인사말한 단어씩 밝아지는 첫 문장기존 인사말
- 03숫자로 보는 경북의대100년 · 9,057명 · 200억 원 · 2,000편기존 인사말
- 04지난 100년1923년부터 가로로 넘기는 연표기존 지난 100년
- 05시간의 서랍배경을 지운 유물 여덟 점기존 지난 100년
- 06동인동 교정의 하루세 줄로 흐르는 옛 사진기존 지난 100년
- 07100주년 기념주간화면 전체로 넓어지는 기념식 사진과 일정기존 기념주간 · 일정 및 프로그램
- 08100주년이 남긴 것조형물 · 기념관 · 100년사기존 주요행사 및 활동
- 09다음 100년교육 · 연구 · 진료 · 동문기존 미래 100년
- 10100Fund모금 목표와 예우, 납부 방법기존 기금모금
- 11100주년 소식보도자료 · 뉴스레터 · 주요행사기존 보도자료 · 뉴스레터 · 주요행사 및 활동
- 12자료 기증기념관에 보낼 자료 안내기존 자료기증
04 / BRAND READING브랜드 해석
새 상징을 만들기 전에
100년이 남긴 단서를 읽었습니다
로고를 새로 만들지 않고, 학교가 이미 가진 이름과 장소와 상징에서 홈페이지의 이야기를 찾았습니다. 아래 네 가지 단서는 두 시안의 첫 화면과 색, 움직임에 그대로 쓰였습니다.
붉은 벽돌 본관
1933년 12월에 낙성한 동인동 교정의 본관은 학교의 얼굴입니다. A안의 필름은 본관 입면을 선으로 그린 도면이 실제 사진으로 바뀌는 장면을 지나가고, 팔레트에는 벽돌 그늘의 색을 담았습니다.
심장과 박동
의학은 결국 한 사람의 생명을 지키는 일입니다. A안은 이 생각을 심전도의 한 박동으로 그렸고, B안은 빛이 도는 유리 심장으로 그렸습니다. 두 시안 모두 첫 장면이 생명의 상징에서 시작합니다.
이중나선과 무한
다음 100년은 연구로 이어집니다. A안의 필름은 「100」이 이중나선으로 풀리며 끝납니다. B안은 머리글의 「100」을 숫자 1과 무한 기호 ∞를 이어 쓴 글자로 바꿔, 한 세기 뒤에도 끝나지 않는 시간을 표현했습니다.
05 / ARCHIVE기록을 다루는 법
지난 100년은 실제 기록으로,
다음 100년은 그린 이미지로
두 시안에서 지켜 온 원칙입니다. 학교가 공개한 옛 사진과 유물 사진은 그대로 쓰고, 아직 오지 않은 미래만 이미지로 새로 그렸습니다. 지어낸 과거가 진짜 기록과 섞이지 않게 하기 위해서입니다.
유물 사진은 흰 배경을 지운 컷으로 다시 만들었습니다. 배경이 사라지자 상량문과 청진기, 왕진 가방이 화면 위에 실제 물건처럼 놓이기 시작했습니다.
CUT OUT · 8 OBJECTS
서랍에서 꺼낸 듯이
가운데 막대를 좌우로 움직이면 원본 사진과 배경을 지운 컷을 비교할 수 있습니다. 여덟 점 모두 같은 방식으로 다듬어, A안의 「시간의 서랍」에서 화면 안쪽부터 하나씩 다가오게 했습니다.
- 8배경을 지운 유물
- 1928–1970s유물의 시기
01 · 1928상량문도립대구의원을 신축 이전할 때 보통병동에 올린 상량문입니다. 
02 · 1940s유럽제 청진기1940년대 진료실에서 환자의 숨소리를 듣던 청진기입니다. 
03 · 1940s혈압 측정기구나무 상자에 담긴 1940년대의 혈압 측정기구입니다. 
04 · 1942대구의전 졸업증명서1942년 대구의학전문학교가 발급한 졸업증명서입니다. 
05 · 1953심전도학 강의록심장내과 교수가 심전도학을 정리한 강의록입니다. 
06 · 1958「대구의학잡지」경북대 의대 대구의학회가 펴낸 전문 학술지입니다. 
07 · 1970s왕진 가방과 태아경환자의 집을 찾아가던 의사의 가방과 태아경입니다. 
08 · ENT머리반사경이비인후과 의사가 이마에 쓰고 진찰하던 반사경입니다.
05 / IMAGERY다음 100년의 이미지
사람 대신
생명의 상징을 그렸습니다
미래를 보여 줄 장면에는 실제 사진이 없습니다. 그래서 심장과 나선, 신경세포처럼 의학이 다루는 생명의 상징을 이미지로 그렸습니다. 다섯 장 모두 사람의 얼굴을 넣지 않았고, 붉은색과 금빛을 두 시안의 팔레트에 맞췄습니다.
-
01HEART유리 심장B안 · 첫 화면 -
02HELIX이중나선A안 · 다음 100년 -
03CRYSTAL크리스털 나선B안 · 미래 비전 -
04NEURON신경세포A안 · 연구 카드 -
05STILL LIFE청진기 정물A안 · 100년사 카드
06 / COLOR컬러 차트
로고의 빨강 하나에서
두 개의 팔레트로
100주년 로고타입의 빨강 #E60012를 기준으로 삼았습니다. 화면에서는 이 빨강을 넓게 칠하지 않고, A안은 필름의 어둠 위에서 덜 번지도록 조금 낮춘 빨강으로, B안은 심장과 피를 떠올리는 깊은 크림슨으로 옮겼습니다. 나머지 색은 본관의 벽돌과 옛 사진, 기록 용지에서 골랐습니다.
Logo Red
#E60012100주년 로고타입- 조금 낮춤Signal Red
#D32D25어둠 위에서 번지지 않는 빨강 · A안 - 그늘 쪽으로Brick Shade
#8F1F19본관 벽돌의 그늘 · A안 - 푸른 쪽으로Crimson
#A51930심장과 피의 빨강 · B안
#623B2F#8F1F19벽돌의 그늘
#C4AF94#CFAA6C옛 사진의 금빛
#DFCBC6#F3ECE0엽서의 종이
사진 속 원색은 그대로 쓰면 탁하거나 어두워서, 화면에서 읽히는 밝기와 채도로 다듬었습니다. 화살표 왼쪽이 사진에서 잰 색, 오른쪽이 시안에 쓴 색입니다.
A · 한 세기를 걷다
필름의 어둠과 기록 용지-
바탕 · 50.2%필름이 재생되는 어둠의 색입니다. 첫 화면과 교정 사진, 기념주간 장면의 바탕입니다.
-
기록 용지 · 38.5%옛 엽서와 기록의 종이색입니다. 연표와 시간의 서랍, 소식 장면의 바탕입니다.
-
벽돌의 그늘 · 10.3%본관 벽돌의 그늘색입니다. 숫자와 기금 장면에 붉은 면을 깔 때 씁니다.
-
옛 사진의 금빛 · 0.8%빛바랜 사진에서 고른 금빛입니다. 영문 소제목과 필름의 먼지 입자에 씁니다.
-
심전도의 빨강 · 0.3%로고의 빨강을 어둠 위에서 덜 번지도록 조금 낮춘 색입니다. 연도와 강조 단어에만 씁니다.
B · 생명을 향한 100년의 빛
밤의 심장과 아이보리-
아이보리 · 47.2%페이지 대부분의 바탕입니다. 기록 카드와 소식 목록이 이 위에 놓입니다.
-
모래 · 27.8%연혁을 가로로 넘기는 장면의 바탕입니다. 아이보리보다 한 단계 어둡게 잡았습니다.
-
크림슨 · 13.1%심장과 피를 떠올리는 깊은 빨강입니다. 제목의 강조 단어와 진행 막대, 마지막 장면에 씁니다.
-
밤 · 10.3%붉은 기운이 도는 검정입니다. 심장이 놓이는 첫 화면과 메뉴의 바탕입니다.
-
먹 · 1.7%본문 글자의 색입니다. 순수한 검정보다 따뜻하게 맞췄습니다.
색 견본을 누르면 HEX 값이 복사됩니다. 견본 안의 숫자는 그 위에 올리는 글자색과의 명도 대비이고, 비율은 두 시안의 메인 페이지 화면을 장면별로 캡처해 잰 값입니다.
07 / TYPOGRAPHY서체
새긴 글자와
인쇄된 숫자
A안의 한글 제목은 기념비에 새긴 글자처럼 획이 굵은 Noto Serif KR로 썼습니다. 연도와 영문 소제목은 19세기 인쇄물에서 쓰던 디도네 양식의 Bodoni Moda로 맞췄고, 본문은 Pretendard로 읽기 편하게 두었습니다. B안은 Pretendard의 가는 획과 굵은 획을 한 제목 안에서 대비시키고, 연도와 숫자에는 Georgia를 썼습니다.
Bodoni Moda · A안 연도
1923
Noto Serif KR · A안 제목
wght 300한 세기를 걷다
스크롤하면 굵기가 300에서 900으로 바뀝니다. A안은 900을 씁니다.
Pretendard · B안 제목
300 · 650생명을 향한
100년의 빛.
Georgia · B안 숫자
100 → 1∞1001∞
B안 머리글의 「100」은 1과 ∞를 이어 쓴 글자입니다. 가리키면 바뀝니다.
Pretendard · 본문
400 · 17px1923년 대구의 작은 강습소에서 시작한 배움은 한 세기 동안 9,057명의 동문을 길러 냈습니다.
긴 문단은 장식 없는 고딕으로 읽기 편하게 두었습니다.
08 / FILM & MOTION필름과 움직임
스크롤이
걸음이 됩니다
두 시안 모두 스크롤을 영상의 재생 헤드처럼 다뤘습니다. 아래로 내리면 필름이 앞으로 흐르고, 올리면 거꾸로 감깁니다. 방문자가 걷는 속도에 맞춰 100년이 지나갑니다.
A안의 첫 화면에 쓴 10초 필름은 여덟 개의 컷으로 콘티를 짠 뒤, 사진과 선 도면, 입자를 코드로 그려 프레임마다 렌더링했습니다.
STORYBOARD · 한 세기를 걷다 · 10초24 FPS · 1600 × 900
- CUT 0100:00.5박동
심전도 용지 위로 박동 하나가 지나가고, 그 뒤로 1923이 떠오릅니다.
- CUT 0200:01.9첫 기록
1923년의 연혁 기록과 대구자혜의원 엽서가 차례로 놓입니다.
- CUT 0300:03.8선 도면
1933년 본관의 입면이 한 획씩 선으로 그려집니다.
- CUT 0400:04.6사진
선 도면 아래에서 1933년의 실제 사진이 떠오릅니다.
- CUT 0500:05.9세대
본관 현관으로 들어서면 옛 사진 사이로 연도가 빠르게 올라갑니다.
- CUT 0600:07.32023
2023년 기념식 사진에 도착합니다.
- CUT 0700:08.7「100」
기념식 사진이 입자로 흩어졌다가 「100」으로 다시 모입니다.
- CUT 0800:09.9NEXT 100
「100」이 이중나선으로 풀리며 필름이 끝납니다.
이 상자가 화면을 지나가는 동안에는 스크롤에 맞춰 프레임이 넘어갑니다. 실제 시안은 가로형 240장, 세로형 180장의 프레임을 쓰고, 여기에서는 네 장마다 한 장을 골라 보여 줍니다.
심전도의 박동에서 시작해 1923년의 기록과 1933년의 본관, 옛 사진과 2023년의 기념식을 지나 「100」과 이중나선으로 끝나는 필름입니다.
유리 심장 둘레로 빛의 궤도와 입자가 도는 영상입니다. 첫 화면에서는 반복 재생되고, 스크롤을 시작하면 프레임이 스크롤을 따라 움직입니다.
- 가로로 넘기는 연표
세로 스크롤이 연표를 가로로 밀어 냅니다. 지금 보고 있는 해의 숫자만 붉게 채웁니다.
- 안쪽에서 다가오는 유물
유물은 화면 깊은 곳에서 작게 나타나 앞으로 다가온 뒤 옆으로 비켜섭니다.
- 화면 전체로 넓어지는 창
기념식 사진은 작은 창으로 시작해 스크롤을 따라 화면 전체를 채웁니다.
- 한 단어씩 밝아지는 문장
긴 인사말은 읽는 속도에 맞춰 한 단어씩 밝아집니다. 이 페이지의 출발점 문장도 같은 방식입니다.
제안 A안
A Century of Medicine한 세기를 걷다
100주년 개교기념식의 이름을 그대로 가져와 스크롤을 걸음으로 삼은 방향입니다. 첫 화면에서 10초 필름이 스크롤을 따라 재생되고, 그 아래로 가로 연표와 시간의 서랍, 동인동 교정의 사진, 기념주간과 100Fund가 한 페이지에 이어집니다.
- 스크롤로 재생되는 10초 필름(가로형 프레임 240장, 세로형 180장)
- 연도가 바뀔 때마다 큰 숫자가 붉게 채워지는 가로 연표
- 배경을 지운 유물 여덟 점이 안쪽에서 다가오는 「시간의 서랍」
- 작은 창에서 화면 전체로 넓어지는 기념주간 사진
Noto Serif KR · Bodoni Moda · Pretendard
DIRECTION NOTES
A안의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.
- 01 · 선 도면이 사진이 되다
1933이라는 숫자 아래에서 본관 입면이 선으로 그려지고, 그 위로 실제 사진이 떠오릅니다.
- 01 · 입자로 모인 100
2023년 기념식 사진이 입자로 흩어졌다가 붉은 「100」으로 다시 모입니다.
- 02 · 한 단어씩 밝아지는 인사말
준비위원회 인사말의 첫 문장이 읽는 속도에 맞춰 한 단어씩 밝아집니다.
- 04 · 가로로 넘어가는 연표
연도가 바뀔 때마다 큰 숫자가 붉게 채워지며 다음 카드로 넘어갑니다.
- 05 · 시간의 서랍
배경을 지운 유물이 화면 안쪽에서 하나씩 다가오고, 오른쪽에 이름과 연도가 바뀝니다.
- 07 · 화면 전체로 넓어지는 기념주간
작은 창으로 보이던 대강당 사진이 스크롤을 따라 화면 전체로 넓어집니다.
- 08 · 겹쳐 쌓이는 카드
조형물과 기념관, 100년사 카드가 차례로 겹쳐 쌓이며 100주년이 남긴 것을 보여 줍니다.
- 09 · 다음 100년
붉은 이중나선 위로 「다음 100년, 세계로 향하는 의학의 거점」이 떠오릅니다.
제안 B안
A Century of Care생명을 향한 100년의 빛
생명을 지키는 마음을 유리로 빚은 심장으로 그린 방향입니다. 첫 화면의 8초 영상이 스크롤을 따라 움직이고, 1923 · 1933 · 1952 · 2023년을 가로로 넘기는 연혁과 눌러서 크게 보는 기록, 교육 · 연구 · 돌봄의 세 장면으로 바뀌는 미래 비전이 이어집니다.
- 붉은 유리 심장과 8초 모션그래픽(스크롤을 따라 프레임 이동)
- 스크롤을 따라 위에서부터 차오르는 문장
- 네 시기를 가로로 넘기는 연혁과 기록 확대창
- 교육 · 연구 · 돌봄 세 장면으로 바뀌는 미래 비전
Pretendard · Georgia
DIRECTION NOTES
B안의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.
- 01 · 생명을 향한 100년의 빛
붉은 유리 심장 옆에 첫 문장이 놓입니다. 스크롤을 내리면 영상 프레임이 함께 움직입니다.
- 01 · 한 세기의 약속
심장이 다가오며 두 번째 문장 「한 세기의 약속, 다음 세기의 가능성.」으로 바뀝니다.
- 02 · 차오르는 문장
큰 「100」 옆에서 「시대는 변해도 생명을 향한 마음은 멈추지 않습니다」가 위에서부터 채워집니다.
- 03 · 1923에서 시작하는 연혁
네 시기의 사진과 연도가 스크롤을 따라 가로로 넘어갑니다.
- 03 · 2023, 기념 조형물
연혁의 마지막 장에는 교정에 세운 KNU 100 MED 조형물이 놓입니다.
- 04 · 기록 카드
사진과 유물 카드를 누르면 설명이 담긴 확대창이 열립니다.
- 05 · 세 장면의 미래
크리스털 나선 앞에서 교육, 연구, 돌봄을 말하는 문장이 차례로 바뀝니다.
- 07 · TOGETHER
크림슨 바탕의 마지막 장면에서 기금 참여를 권합니다.
11 / MOBILE모바일
손안에서도
같은 한 세기
동문 소식과 기금 안내는 휴대폰으로 먼저 확인하는 경우가 많습니다. A안은 필름을 세로 화면용으로 따로 렌더링했고, 두 시안 모두 고정 장면의 길이와 글자 크기를 세로 화면에 맞춰 다시 정했습니다.
COMPARE두 방향은 어떻게 다를까요
같은 100년을 보여 주는
두 가지 걸음
두 시안은 같은 기록을 담고 있지만, 첫 장면을 여는 방식과 이야기의 무게가 다릅니다. 학교가 100주년 사이트에서 가장 먼저 전하고 싶은 말이 무엇인지에 따라 고를 수 있도록 차이를 정리했습니다.
구분A · 한 세기를 걷다B · 생명을 향한 100년의 빛
첫 화면심전도의 한 박동에서 NEXT 100까지 이어지는 10초 필름빛이 도는 유리 심장과 8초 모션그래픽
이야기의 축기념식의 이름 「한 세기를 걷다」생명을 향한 마음
색필름의 어둠 · 기록 용지 · 벽돌 · 심전도의 빨강 · 금빛밤 · 아이보리 · 모래 · 크림슨
서체Noto Serif KR · Bodoni Moda · PretendardPretendard · Georgia
연혁1923년부터 열 장의 카드로 넘기는 가로 연표네 시기를 넘기는 가로 연혁
기록을 보여 주는 방식배경을 지운 유물이 안쪽에서 다가오는 서랍사진과 유물 카드를 눌러 여는 확대창
다음 100년이중나선 위의 교육 · 연구 · 진료 · 동문크리스털 나선 앞의 교육 · 연구 · 돌봄
참여 안내모금 목표와 예우, 납부 방법, 자료 기증기금 참여를 권하는 마지막 장면
무게를 둔 곳학교의 이름과 장소, 백 년의 기록의학이 지키는 생명과 사람
THE NEXT CENTURY
기관의 100년을,
기관의 100년을,
걸어 들어가고 싶은 화면으로
기념사업은 끝나도 학교의 기록은 계속 쌓입니다. 홈페이지가 그 기록을 처음 만나는 곳이 되도록, 기관이 가진 이름과 장소와 상징부터 함께 다시 읽겠습니다.
다른 프로젝트
-
공공·교육
말레이시아 한국교육원
한글을 만든 세 획(천지인)에서 출발한 브랜드 해석, 밤하늘의 골드와 두 나라 꽃의 코럴로 정한 컬러, 18초 모션 필름과 천지인 · 코럴 저니 두 가지 시안, 한글학교 지도와 4,600km 유학 여정까지 담은 교육부 재외교육기관 홈페이지 리뉴얼 제안 과정
-
교육·학교
경기글로벌스쿨
신앙과 세계를 「한 점에서 세계로」라는 이야기로 묶은 브랜드 해석, 네이비·골드와 울트라마린의 컬러, 빛(LUMEN)과 지평선(HORIZON) 두 가지 시안과 스크롤 모션그래픽까지 담은 기독교 대안학교 메인 홈페이지 리뉴얼 제안 과정
-
공공기관
국가신약개발재단
이용자 분석과 CI 해석, 아홉 개의 메인 시안, 파이프라인 시각화까지 담은 공공기관 홈페이지 구축·리뉴얼 과정