서울대학교 컴퓨터공학부 웹사이트 리뉴얼 작업기
기획, 디자인, 그리고 개발 협업 - 최유진
서디연 살롱이란?
3학년 이상의 동아리 회원들이 3개월 동안 진행하는 자유 주제의 프로젝트를 매달 공유하는 살롱으로, 매달 살롱에서 작업 진행 상황을 발표하고 이에 대한 상호 피드백 활동을 합니다. 각자의 포트폴리오를 완성하며 프로 디자이너로의 성장으로 나아갑니다.
안녕하세요, 저는 디자인과 시각디자인전공 22학번 최유진입니다. 프로덕트 디자인과 UX리서치에 관심이 많아요. 자유롭게 디자인 작업을 공유하는 서디연 살롱을 기회로, 지난 1년 간 서울대학교 컴퓨터공학부 웹사이트 리뉴얼 프로젝트의 디자인 및 기획 작업을 하면서 느끼고 경험하고 배운 것들을 기록하고 나눠보려고 해요.
기존 -> 1차 개편 -> 최종 리뉴얼 사이트개요
0. 들어가며
1. 큰 틀 잡기
2. 1차 디자인
3. 베타테스트와 피드백
4. 최종 디자인
5. 릴리즈, 그 후
0. 들어가며
팀 결성
저는 컴퓨터공학부 소속 개발동아리 '와플스튜디오'에서 디자이너로 활동하고 있어요. 23년 5월, 학부에서 동아리에 협업을 제안해왔는데, 여름방학동안 5-6인의 개발자&디자이너 팀이 기존 홈페이지를 리뉴얼하는 프로젝트였어요. 홈페이지를 만드는 일은 무언가 근본처럼 느껴져서 한번쯤 해보고 싶었는데다 복수전공하고 있는 컴공이라니, 큰 고민 없이 뛰어들었습니다. 물론 이렇게까지 규모가 큰 작업일 줄 상상도 못한 채로요...
팀은 이렇게 구성되었어요.
백엔드 개발자: 3명 (현재 2명)
프론트엔드 개발자: 3명으로 시작했으나 2명
디자이너: 2명
기존 사이트는 10년 전 만들어진 것으로, 정보량이 많은 것이 특징이고 전체적으로 UX가 직관적이지만 과잉 친절한 면도 있었어요.
1. 큰 틀 잡기
기획: 내비게이션 바 개편하기
뭐든 시작하기 전에 구조부터 잡아야겠지..하며 우선 내비게이션 바를 개편하기로 했어요.
언뜻 보기에 기존 사이트는 메인 페이지에 큼지막한 영역을 차지하고 있던 ‘새소식’도, 푸터에 있는 중요해보이는 페이지 몇 개도 내비바로 접근할 수 없는 요상한 상태로 보였어요.
행정실과의 미팅을 통해 상황을 파악한 후, 빠진 페이지들은 추가하고, 잘못 묶인 듯한 페이지들은 옮기고, 굳이 한 뎁스 더 들어갈 필요 없어보이는 페이지들의 계층을 단순화시키고, 의아한 카테고리들의 워딩을 수정했어요. 그렇게 아래와 같이 페이지들에 내용적인 분류와 위계가 확정되었답니다.
한글과 영문 두 가지 버전을 제공하는 사이트인데 처음에는 기존과 같이 별도로 기획했다가, 통일된 사용자 경험과 깔끔한 개발을 위해 추후 오른쪽과 같이 통합해서 카테고리명만 번역하면 되도록 했어요.
페이지 구조 분류하기
하지만 디자인 작업을 시작하기에는 여전히 한참 막막했어요. 이미 있는 수많은 페이지들을 어디서부터 손대야 할지, 또 두 명이서 어떻게 나눠서 작업해야 할지 뚜렷하게 보이지 않았거든요.
그래서 목적(내용)으로 분류를 해보았으니, 이번에는 모양새를 기준으로 분류해보기로 했어요. 모양새라 함은 레이아웃, 그러니까 각 페이지에 들어있는 정보의 종류와 관련 있어야 했어요. 그렇게 기존 사이트를 씹고 뜯고 맛보는.. 시간을 가졌어요.
어지럽지만 속시원해지는 작업이었어요 �그랬더니 페이지들을 어떻게 분류해서 작업해야 할지 대략 보이기 시작했고, 아래처럼 11개의 단순화된 와이어프레임식 구조가 나왔어요. 산을 보려고 나무들을 훑은 셈이죠. 이는 UI를 디자인 할 때뿐 아니라 팀원들이 공통된 그림을 상상하는 것이나 백엔드가 API를 설계하는 것에도 도움이 됐어요.
컨셉 정하기
이제 컨셉과 디자인 스타일을 정하기로 했어요.
학교에서는 외주 업체가 아닌 '학생들이 만든 것에 의미가 있는' '실험적이면서도' '쓰기 편한' 사이트를 요청했어요. 레퍼런스를 열심히 찾아봤지만 국내에 핸드메이드스러우면서 UI와 UX, 그리고 성능을 모두 고려한 맞춤형 학과 홈페이지는 많지 않아서 어려움을 겪기도 했어요.
학교, 특히 학과는 보통 브랜딩이 비교적 잘 되어있지 않은 편이에요. 그럴 때 홈페이지를 세련되게 만드는 가장 쉬운 방법은 고퀄리티의 학과 영상이나 사진을 쓰는 것이라고 생각해요. 그렇지만 '시설 안내' 페이지의 사진들을 휴대폰으로 직접 촬영해 넣어야 했을 만큼 소스들도 많이 부족한 상태였어요.
그럼 우선 '컴공스러움'을 찾아보기로 했고, 컴공의 너드미를 담되 가볍게 밈(meme)화하지 않는 것이 전제였어요. 우리 사이트는 정보량이 많고, 다양한 사용자층(학생과 교직원부터 입시생과 학부모, 그리고 남녀노소 각국의 학계 인사들)이 방문하는 것을 고려했을 때, 개성이 너무 과하지 않아야 한다고 판단했기 때문이에요. 리뉴얼된 사이트가 오래 쓰였으면 하는 바람도 있었고요.
많은 이미지를 보고 많은 사이트에 방문한 후 남은 키워드는 ASCII아트, 회로, 파일이었어요. 소프트웨어와 하드웨어, 디지털과 아날로그가 조화롭게 연상되어야 할 것이라는 숙제와 함께요.
메인 컬러로는 학교 공대의 상징색인 주황을 그대로 가져가고, 회색을 섞기로 했어요. 하지만 가독성과 메인 페이지의 그래픽 등을 고려해야 하니 정확한 색상코드를 정하는 것은 미뤄두었어요. 확정하기까지 컬러 팔레트에서 주황과 회색만 몇 백개씩은 거뜬히 찍어본 것 같네요..
폰트는 노토산스+윤고딕을 거쳐 결국 전체 프리텐다드로 정착했습니다.
2. 1차 디자인
UI 디자인과 양치기
킥오프 회의를 한 지 3주쯤 되어 본격적인 UI 작업에 들어갔어요.
디자이너 언니와 함께 재사용될 요소들을 피그마에서 컴포넌트화하고, 위에서 분류한 구조를 분담해서 디자인했어요. 각자 맡은 부분을 디자인하면서도 개발 전 컨펌은 서로 꼭 최소 한 차례 거쳤는데, 그러다보니 갈수록 보는 시각도 많이 비슷해졌던 것 같아요. 페이지가 많았기 때문에 양치기를 외치며 속도를 냈습니다.
행정실 분들이 사용할 어드민 페이지도 만들어야 했어요. 모든 페이지에 편집 기능을 제공하기에는 개발 기간이 타이트해서 가장 많은 글이 게시되는 공지사항/새소식/세미나만 우선 제공하기로 했습니다.
개발된 것을 보며 QA도 진행하고요. 무한 수정의 굴레를 함께해준 프론트 팀원들에게 너무 고맙게 생각합니다..
협업: 피그마를 잘 써보자!
카테고리도, 하위 페이지도 많아서 이것을 2달 채 안 되는 단기간에 여럿이서 디자인-개발-수정하다보니 다소 정신 없어지는 순간들이 있었어요. 한 눈에 구조와 진행상황이 보이는 환경에 대한 필요성을 느꼈고, 아래와 같이 피그마에 카테고리별, 진행상황별 섹션을 나누어 사용하길 제안해보았습니다.
개인적으로 작업 능률이 많이 올라서 제법 유용하게 사용한 것 같고, 마지막에는 최종본들을 한 곳에 모아두었어요.
UX 고민 사례: 내비게이션 바 설계
다양한 UX 고민을 거쳤는데 그 중 하나만 소개할까 해요.
사이트를 탐색할 때 가장 중요하게 사용되는 GNB(Global Navigation Bar)는 대체로 데스크탑 화면 상단에 위치하고, 기존 사이트도 그러한 형태였어요. 그렇지만 상단에 위치시키기에는 카테고리가 많고 하위 카테고리로 접근하는 과정에도 불편함이 있다고 판단해, 왼쪽의 사이드바를 메인으로 하고 그것이 펼쳐져 하위 카테고리를 보여주는 식으로 결정했어요. (IF디자인어워드를 수상한 서울대학교 통합사이트를 참고했어요.)
각각을 주황NB(depth1), 회색NB(depth2)라고 불렀답니다. 여기에 추가로, 상위 카테고리에서 진입했을 경우 내비바를 열지 않고도 하위 카테고리 간 이동을 바로 할 수 있도록 서브NB(depth2)를 도입했어요.
세 개의 내비를 어떤 상태로 보여줄지 정하는 것도 긴 여정이었는데요,
주황NB의 폭이 넓어서 하위 페이지들에서는 답답해보였기 때문에 최대한 자연스럽게 접어주고 싶었어요. 그래서 메인 페이지 외에서는 자동으로 접히도록 하고, 접고 펼치는 버튼을 둔 후 한 번이라도 펼친 사용자는 정보를 저장해서 (여기저기 탐색하고 싶은 사용자라 간주하고) 그 시점부터는 접히지 않도록 했죠.
베타테스트 답변 일부하지만 이후 이 생소한 로직에 대한 부정적 의견들이 들어왔고, 답변들끼리 서로 상반된 요구를 하기도 했어요. 사용자에게 잘못 설계된 자율성을 제공한 결과 같았죠. 결국, 이 접고 펼치는 버튼을 아예 없애기로 결정했어요.
최종 내비게이션 설계주황NB에서 카테고리 호버 시 해당하는 회색NB를 펼친다.
메인 페이지: 주황NB를 펼쳐놓는다.
그 외 모든 페이지: 주황NB를 접고, 대신 서브NB를 보여준다.
접힌 게 디폴트가 돼서 아쉬운 점은 현재 위치를 표시하는 UI를 통해 보완한다.
현재 방식에 대해서는 "어쨌든 직관적이다"라는 이야기를 듣고 있으니 돌고 돌아 결국 편리성, 직관성과 심미성 간에 적절한 타협점을 찾는 법을 배운 사례 같아요.
3. 베타테스트와 피드백
다크모드를 디폴트로?
지도교수님, 행정실과의 작은 미팅 몇 차례와 개발 기간 후, 릴리즈 시점이었던 개강을 앞두고 23년 8월 말 학교와의 미팅이 다가왔습니다. 핵심 기능은 대부분 완성되어 기존 사이트와 비교한 모습과 메인페이지 시안들에 대한 PT를 진행했고, 다음과 같은 피드백을 받았어요. 시안 중에서 다크모드가 디폴트인 것이 더 좋은 것 같다, 성능은 완벽했으면 좋겠다, 불필요한 디자인 요소는 배제해도 된다, 조금 더 실험적이었으면 좋겠다.
계획대로라면 곧 릴리즈를 해야 하는데.. 1차 멘붕이 왔어요. 가독성에 대한 걱정이 앞섰지만 다크모드를 디폴트로 색상을 바꾸는 대공사를 진행해보기로 했어요.
눈물 가득했던 베타테스트와 피드백 기간
그렇게 약 3주동안 컬러를 바꾸고 메인 페이지의 그래픽을 실험적으로 만든 1차 디자인이 완성되고 배포되었어요. 기존 사이트를 유지하며 릴리즈할 것이 아니라 처음부터 완전히 대체할 것이어서, 피드백 기간을 길고 신중하게 가지기로 하고 다양한 유저 테스트를 진행했어요.
피그마에서 일하셨던 디자인과의 UI 분야 교수님께 자문 부탁드려 사용성 검증
Closed Beta Test: 와플스튜디오 동아리원과 행정실, 학부 교수님들 대상으로 구글폼
Open Beta Test: 에브리타임과 학부 단톡방, 기존 사이트 게시글을 통해 전체 학생 대상으로 구글폼
앞의 두 단계는 잘 넘겼는데 팀은 OBT에서 2차 멘붕을 경험했어요. 홈페이지치고 실험적인 디자인을 시도하다보니 호불호가 갈릴 것이라 예상은 했지만, 익명 커뮤니티를 포함해 불특정 다수에게 디자인을 공개하고 평가받는 경험을 처음 해봤던 것이기에 상처되는 비난이나 인신공격을 피드백과 구분해보려 하다가도 울고.. ᵕ ᵕ̩̩ 그렇게 악깡버의 시간을 보냈어요. 누군가한테 보이는 게 재밌던 디자인이 처음으로 숨기고 싶은 대상이었다고 일기에 써놨었네요.
다크모드를 지적하는 답변 일부어쨌든 부정적인 피드백의 가장 큰 원인은 눈 아픈 다크모드와 과한 실험정신이 들어간 그래픽이라는 것이 전달됐어요. 핵심 요구사항이었기에 어떻게 해야 할지 잠시 고민했지만 이대로 진행하는 것은 불가능했고, 엎친 데 덮친 격으로 학부 내부회의가 다가왔습니다. 회의에서도 반응은 극명히 갈렸고, 호불호 갈리는 디자인을 반대하는 의견들을 전달받았어요.
클라이언트의 '실험적인 다크모드 사이트'라는 요구사항을 긍정적인 반응을 이끌도록 디자인하지는 못한 것이기도 했고, 예상은 했어도 실험적인 사이트에 대한 거부 반응이 크다는 것을 잘 알게된 경험이기도 했어요. 디자인은 필연적으로 취향의 영역을 건드릴 수밖에 없다는 것도요. 쉼없이 달려오느라 지친 3달이었고 개강을 해서 시간을 쏟기 어려운 상황이었기에, 학부와 조율하여 릴리즈를 다음 방학으로 미루면서 사이트를 엎기로 결정했어요.
4. 최종 디자인
다크모드? 라이트모드? 그 혼종이 나오기까지
학기동안 잠깐 멈추니 마음은 한결 편해지고 기억은 미화돼서 다시 하고 싶어지는 게 신기했습니다.. 가독성을 최우선으로 생각하면서 컨셉과 요소들은 유지하되 호불호 덜 갈리는 심플한 디자인으로 수정 방향을 잡았어요.
디폴트가 다크모드인 것은 무리였지만 반쯤짜리 다크모드는 괜찮을 것 같았는데, 밀도 면에서도 그렇고 흰 배경에서 예쁘게 만드는 것보다 어두운 배경에서 예쁘게 만드는 게 대체로 더 쉽다고 생각했어요.
다크모드용 배경 회색은 진할수록 가독성이 나쁘고 연할수록 세련되지 않으면서, 붉은기 돌수록 공격적이고(해커같고) 푸른기 돌수록 주황과 어울리지 않게 투박해서 중간점을 찾는 것이 중요했어요. 수차례의 가독성 테스트를 거쳐 메인 색상들을 이렇게 확정지을 수 있었어요.
다크모드의 가독성을 최대한 높이려 노력했지만 그래도 공지사항 등 긴 글에 사용하기에는 무리가 있었어요. 그래서 본문 영역들은 라이트 배경을, 나머지 컨셉적인 부분에는 다크 배경을 사용해 밀도를 챙기기로 했어요. 그랬더니 대체로 확연히 낫다는 반응이었지만 애매한 느낌이 든다는 피드백도 들었어요. 어두운 색과 밝은 색을 적절히 풀어주는 것이 관건이었고, 이 고민은 메인 페이지의 그래픽을 만들 때도 이어졌습니다.
메인페이지 확정
아이디어 뱅크 디자이너 언니가장 먼저 시작했지만 가장 늦게 확정된 것이 메인 그래픽이었어요. 컴공의 정체성을 암시적으로, 그러면서 취향 타지 않게 풀어내기 위해 무한 시안 작업을 거쳤고, 여러 투표를 통해 아래의 요소들이 나왔어요.
CSE라는 글씨를 형상화한 배경과 SNUCSE를 이진수로 표현한 모듈을 에셋으로 만들었어요. 그리고 학부 소개 본문에서 발췌한 문장을 다듬어 헤드라인 문구로 사용하기로 했죠. 학교에서 폰트 비용을 지원해주겠다고 해서 '산돌정체' 폰트가 채택되었지만, 릴리즈 후 얼마 되지 않아 기본 트래픽을 초과하면서 달마다 지불해야 하는 비용이 과하게 커졌어요. 지금은 아쉬운 대로 '고운바탕' 폰트로 대체해 사용하고 있답니다.
최종 메인 페이지모바일 반응형 대응하기
모바일 반응형은 핵심 요청사항 중 하나였어요. 기존 사이트는 반응형을 제공하지 않아 작은 화면에서 불편하게 확대/축소를 해야 했거든요.
디자이너와 프론트 개발자 모두 반응형은 처음이라 레퍼런스를 찾으며 공부했어요. (왼쪽 사이드바가 있는 LINE 라인 사이트는 로직에, 서울대학교 통합사이트는 내비게이션 바에 좋은 참고가 됐어요.)
애초에 바디 좌우의 여백이 꽤 있는 편이었기에, 태블릿뷰까지는 따로 제공하지 않고 모바일 해상도를 기준으로 하나의 브레이크포인트를 두는 것으로 출발했어요. 하지만 실제로 보니 데스크탑 크기에서 항상 Fixed Layout으로 가져가는 것은 어색했고, 결국 (작은 데스크탑 해상도라고 타협한) 1200px을 최소 너비로 지정하고 이보다 클 때는 Fluid하게, 이보다 작을 때는 잘리는 부분이 생기더라도 Fixed하게 움직이는 것을 기본으로 하기로 했습니다.
완성된 웹을 모바일 버전으로 만드는 일은 걱정했던 것만큼 오래 걸리지 않았던 것 같아요. 분류했던 레이아웃(앞의 11개 구조)마다 각각 두세페이지 정도씩 만들어보면서 위 사진처럼 일반화된 로직을 나름대로 도출해본 후, 프론트 개발자와 논의하고, 우선 일괄 적용한 뒤 발견되는 예외 케이스들을 사후 대처하는 식으로 진행했어요. 즉, 일부 페이지의 반응형 디자인만 피그마로 제작한 것이에요.
5. 릴리즈, 그 후
유지 보수와 남은 과제들
마지막에 폰트를 결제해서 입히고.. 릴리즈했던 순간은 '드디어!'하는 마음에 안도감이 들었습니다.
메인 그래픽이 이진수를 표현한 것이라는 걸 바로 알아챘다며 컴공생들의 취향을 간파했다는 연락을 받는 순간 이 한 마디 들으려고 달려왔다는 생각도 들었어요.
사이트에 들어가는 이미지들과 PDF문서도 일부 만들었는데, 주변에서 보이면 반갑기도 해요.
릴리즈 후 첫 방학인 지금은 미뤄두었던 여러 어드민 페이지들을 만들고, 하고 싶은 거 다 해서 너무 다양해진 컴포넌트들을 '같은 기능은 같은 생김새로' 통일하는 작업을 하고 있어요. 개발팀원들은 코드 최적화와 웹 취약점 점검 중에 있습니다.
난장판이 된 피그마 파일을 정리하고, 디자인시스템을 체계화할 준비를 하고 있기도 하고, 사이트의 주관리자인 행정실 분들과 지속 가능한 협업을 어떻게 진행하는 게 좋을지도 고민하고 있답니다.
마치며
실무 경험이라곤 인턴이나 사이드프로젝트 정도였던 경험 부족한 디자이너 둘과 개발자 다섯이 뭉쳐서 A부터 Z까지 모든 걸 시행착오 겪었던 것 같아요. 학교라는 클라이언트가 괜히 어렵게 느껴질 때도 있었어요. 하지만 많이 배운 것은 분명합니다.
왜 이렇게 힘들지, 푸념했을 때 누군가 말하기를 '진심이면 안 되는 곳에 진심으로 임해서' 생긴 문제라고 했는데, 아마 이게 이 프로젝트를 관통하는 표현일 수도 있겠어요. 하지만 매주 1회의 1회식을 지켜오며 끈끈하게 달려온 팀원들은 이 사이트에 애정도 책임감도 컸던 것 같아요. 사소한 것까지 다 의논하고 같이 결정할 수 있는 디자이너 언니가 있어 든든했고, 일당백 프론트와 묵묵한 서버 팀원들 모두 정말 수고 많았습니다 !!
또, 협업한 학부 서버 동아리 바쿠스와 자기 일처럼 도와준 많은 동아리원들, 자문 주신 교수님께도 감사합니다.
넣었다가.. 뺐다가.. 장식했다가.. 덜어낸 사이트가 의도한 대로 잘 이용되었으면 좋겠어요.
몇 년 간 유지보수를 맡아 알게 모르게 조금씩 단장할 예정이니 버그 제보 및 피드백 (그리고 리크루팅..) 언제나 환영입니다 :)
긴 글 읽어주셔서 감사합니다!
서울대학교 디자인 연합(SNUSDY) 인스타그램 | @snu_sdy.official
서울대학교 디자인 연합(SNUSDY) 링크트리 | linktr.ee/snu_sdy.official
