위민후 코드 서울 모두콘 2022 웹사이트 제작 회고
모두콘2022에서 현아님과 화영님의 멋진 발표로 위민후코드 서울의 세션을 무사히 마치게 되었습니다. 발표자 중 한 명이었던 저는 발표를 앞두고 코로나에 걸리는 바람에 참여하지 못하게 되었습니다.
아쉬운 마음에 이런 합성사진까지 만들며 대리만족했는데요.
직접 발표하진 못했으나 혹시나 저의 웹사이트 제작기가 궁금하신 분들을 위해 웹사이트 제작기 회고 글을 준비해보았습니다!
👉 웹사이트가 궁금하시면 아래의 링크를 클릭해주세요!
https://moducon2022-5fa7d.web.app
(2022년 12월 기준으로 이용 가능한 사이트지만, 추후 이용이 불가할 수 있다는 점 미리 말씀드립니다)
기획: 김두리
디자인: 김두리
개발: 김두리
QA: 김두리, 유현아, 윤화영
컨퍼런스 발표를 앞두고 다들 미리 뭘 하자고 정한 것도 아닌데 신기하게도 각자 잘하는 영역의 일을 담당하게 되더라고요. 현아님은 컨퍼런스 관련된 모든 준비와 task 체크 등을 담당해주셨고, 화영님은 썸네일 이미지와 같은 디자인 리소스와 발표 자료를 제작해주셨어요. 제가 잘 할 수 있는 게 뭔지 생각해보다가 직업이 개발자이기 때문에 발표와 관련된 웹사이트를 하나 만드는 게 어떨까? 싶어서 작업을 착수하게 되었습니다.
GitHub Repository로 프로젝트 첫 삽 뜨기
모두콘 준비를 위해 Slack에 채널이 생성된 것이 10월 말이었는데 저의 첫 commit 내역을 보니 11월 13일에 이 프로젝트를 세팅하기 시작했네요. 아마 11월 초에 컨퍼런스 준비를 하며 모였던 미팅에서 제가 웹사이트 제작을 해보겠다고 말했던 것 같네요! 저희의 주제가 커뮤니티가 뭐라고 생각하세요? 였기 때문에 MODU의 커뮤니티에 대한 생각을 들어보고 싶기도 했고, Word Cloud를 만들어서 화면에 뿌려주면 재밌겠다는 생각으로 웹사이트를 만들었던 것 같습니다.
소소한 기획단계
보통 회사 프로젝트라면 기획과 디자인이 완성된 후에 개발을 착수하는데, 저는 일단 Word Cloud 기능이 들어간 웹사이트를 만들기 위해 프로젝트 초기세팅부터 시작했습니다. 그리하여 웹사이트를 Word Cloud를 볼 수 있는 페이지와 키워드를 입력할 수 있는 페이지 둘로 나눴는데요. 방명록도 받으면 좋지 않을까? 싶어서 발자국이라는 메뉴도 만들게 되었고요. 웹사이트 링크가 부연 설명이 적힌 SNS 게시글을 통해 전달되긴 하겠지만 이 웹사이트의 목적과 위민후코드 서울에 대해 알려주기 위한 메인 페이지 또한 만들었습니다. 사용자의 동선을 생각하면 메인 페이지 설명 → 키워드 입력창 → 방명록 → Word Cloud 순으로 배치하면 좋을 것 같아서 메뉴를 해당 순서로 구성하게 되었습니다.
웹사이트 기술스택 및 첫번째 UI
프론트엔드 기술스택: React, TypeScript, TailwindCSS, Daisy UI
백엔드: Firebase, Cloud Firestore
완전 최초의 디자인은 부끄러워서 공개할 수 없고, 정제된 두 번째 디자인을 공개하겠습니다!
디자인 감각이 없지만, Daisy UI의 깔끔한 컴포넌트들을 그대로 가져다 써서 좀 깔끔한 형태의 간단한 사이트 구색을 갖출 수 있었습니다.
이후 Slack에 배포된 웹사이트를 공유해 드렸더니 현아님께서 QA 리스트를 깔끔하게 만들어주셔서 개선할 점에 대해 꼼꼼히 작성해주셨어요. 현아님도 행사 준비로 바쁘셨을 텐데 이렇게 QA 시트까지 따로 제작해서 꼼꼼히 봐주셔서 너무 감사했어요.
프로젝트 QA 과정
캡쳐 화면으로만 보면 조금 딱딱해 보일 수도 있지만, QA 시트를 공유하면서 서로 응원의 메시지를 주고받는 따뜻한 현장이었답니다. 다음 사진처럼요! Women Who Code의 자랑스러운 문화인 Applaud가 운영진 생활 1년이 다 돼가니 자연스레 나오는 것 같습니다~
회의 때마다 제가 만든 위민후코드 서울의 공식 포즈를 약간 변형해가며 기념사진을 찍는 것도 너무나 즐거웠답니다!
Release Note 공유 및 웹페이지 개선 과정
꼼꼼하게 QA 해주셨는데 게으름 피우면 안 되겠다는 마음에 퇴근 후 저녁 시간대와 주말의 자투리 시간을 이용해서 웹사이트를 개선하려고 노력했던 것 같아요. 배포하고 나면 늘 Slack 채널에 이런 식으로 Release Note도 작성해서 업데이트 사항을 알리려고 노력했어요.
QA 과정을 거쳐 위민후코드의 메인 컬러가 적용된 웹사이트가 탄생했는데요!
왼쪽 화면과 오른쪽 화면의 차이가 무엇일까요? 바로바로 폰트입니다.
좌: Nanum Gothic Coding
우: Noto Sans KR
기본으로 설정되어있던 Nanum Gothic Coding 폰트에서 화영님의 추천을 통해 깔끔하기로 소문난 Noto Sans KR로 변경했는데요. 글씨체 하나 바꿨을 뿐인데 사이트가 확실히 깔끔해 보이긴 하네요!
이후 한 차례의 UX 개선 및 다른 추가 작업을 하면서 한 가지 눈에 띄는 변경 사항을 추가했는데요. 그것은 바로 Footer에 만든이인 저의 이름을 강조한 것이에요! 저는 그냥 소소한 작업물이고, 굳이 제 이름을 강조할 필요가 없다고 생각했는데 화영님과 현아님의 의견을 적극적으로 반영해서 제 이름을 그라데이션과 별 모양을 넣어 조금 강조해보았습니다~ 사실 저기 들어간 두 가지 색상도 Women Who Code의 공식 색상이랍니다~
이후에는 링크 공유를 하면 자동으로 뜨는 썸네일 이미지와 웹사이트 타이틀 및 부연 설명을 위해 og태그를 설정하고, 메인 페이지에 저희 발표 시간 전까지의 카운트 다운 숫자도 추가하고, 콘솔창에 이스터에그까지 심으면서 작업을 마무리했습니다.
많은 분의 참여로 커뮤니티에 대한 키워드가 모여 구름을 완성할 수 있었던 것 같습니다. 특히나 제가 밀고 있던 용기라는 키워드가 가장 많은 사람의 입력으로 가장 큰 영역을 차지해서 좀 뿌듯했던 것 같습니다~ 혹시나 악성 키워드가 있으면 데이터베이스에서 지워버리려고 준비하고 있었는데 다행히 그런 일은 없었습니다. 하하
즐거웠던 점과 아쉬웠던 점
혼자 사이트를 개발해나가면서 즐거웠던 점과 아쉬운 점을 정리해볼게요.
즐거웠던 점
- og태그를 설정하며 경로 문제로 처음에 우여곡절을 겪었지만 해보지 않은 것을 해봐서 뿌듯했어요.
- 콘솔창에 아스키 아트(ASCII art)를 꼭 넣어보고 싶었는데 해봐서 뿌듯했어요.
- 사랑과 정성이 묻어났던 QA 시트 아직도 너무 감동입니다~
아쉬웠던 점
- React helmet 라이브러리로는 웹페이지의 내의 동적 메타태그 적용은 어렵기 때문에 다른 라이브러리를 설치해야 했는데, 그 과정이 번거로울 것 같아서 html에 정적으로 메타태그를 적용했어요. 처음부터 Next.js로 만들면 도달률이 좀 더 좋았을 것 같은데, 쉽게 가려고 익숙한 React를 사용한 점이 조금 후회되었네요.
- Realtime DB가 아니여서 새로고침을 수동으로 해야 최신 업데이트가 반영되는 점이 아쉬웠어요. 다음번엔 Firestore말고 소켓 통신을 해보고 싶어요.
- 제 머릿속에서 나온 디자인이 단순해서 아쉬웠는데 내년도엔 위민후코드 서울 운영진에 멋진 디자이너님이 함께해서 Figma를 보면서 작업을 하고 싶어요.
웹사이트 성능 및 접근성 비교
자랑하고 싶은 점은 바로 웹사이트의 접근성이 좋다는 점입니다.
크롬의 개발자도구를 열면 Light House라는 항목이 있는데요. 이를 통해 웹사이트의 성능과 접근성 등을 측정할 수 있습니다. 상단의 이미지는 트위터 웹사이트를 측정한 결과이고, 아래의 이미지는 제가 만든 웹사이트를 측정한 결과입니다.
제가 PWA 앱을 만든 것이 아니라서 PWA 항목에는 — 표시가 있고, 퍼포먼스 측면에서도 트위터보다 뒤처지지만, 접근성과 Best Practices를 잘 따랐는지에 대한 지표와 SEO(검색엔진 최적화)에 있어서는 트위터 웹사이트보다 높은 점수를 받았습니다! 이 정도로 지키면 되지 않을까 싶은 정도로 작성한 코드인데 Light House의 측정 결과가 생각보다 만족스러웠습니다.
이 포스팅에 저의 개인적인 회고만 쓰기엔 너무 아쉬우니까 웹사이트 통계도 간단하게 함께 살펴볼까요?
웹사이트 통계
우리나라뿐만 아니라 미국, 영국 심지어 프랑스에 있는 사용자까지 웹사이트가 도달할 수 있었는데요! SNS의 힘이 이렇게나 크고 소중하답니다~ 제가 만든 웹사이트의 총사용자는 244명이고, 페이지 조회수는 2천 건이 넘고, 사용자 참여율도 1300이 넘는 수치가 나와서 뿌듯했습니다. 다음번에는 웹사이트 회고를 위해 Analytics도 조금 공부해야 할 필요성을 느끼며 포스팅을 마무리하겠습니다.
위민후코드에 대해 궁금하시다면?
Women Who Code(위민 후 코드)는 기술 분야에 종사하는 여성에게 영감을 불어넣고 함께 성장하는 것을 미션으로 삼은 국제 비영리 단체입니다. 위민 후 코드는 더 많은 여성이 기술 분야에서 리더, 경영진, 투자자, 임원이 되는 세상이 되도록 노력하고 있습니다.
위민 후 코드 글로벌 커뮤니티에 도움을 주고 싶으시다면 supporting WWCode를 참고해 주시고, 자세한 내용은 공식 홈페이지(womenwhocode.com)를 참조해 주시길 바랍니다.
또한 위민 후 코드 서울 챕터에 대해 더욱 자세히 알아보고 싶으시다면 아래의 링크들을 참고해 주세요!
WWCS 정기레터 구독 : https://forms.gle/dr57Zk6XDQuyc3SY8WWCS
지난 레터 : https://page.stibee.com/archives/148306
Medium : https://medium.com/wwcodeseoul
Facebook 그룹 : https://www.facebook.com/groups/wwcodeseoul
Facebook 페이지 : https://www.facebook.com/wwcodeseoul
Twitter : twitter.com/wwcodeseoul
GitHub : https://github.com/WWCodeSeoul
Home : https://www.womenwhocode.com/seoul/about
—
이번 포스팅을 작성하는 데 도움을 주신 분들🌷:
