안녕하세요. 우리들의 질문 놀이터, 큐리터 프로젝트를 개발하고 있는 동영 1팀의 발표를 맡은 임경희입니다.
발표는 팀원 소개, 프로젝트 소개, 기능 소개, 기술 스택과 개발 방식, 그리고 향후 업데이트 계획 순으로 진행하겠습니다.
팀원 소개
저희 팀은 사람들에게 질문하기 좋아하는 3명의 예비 프론트엔드 개발자로 구성되어 있는데요. 당근과 채찍을 맡고 있는 팀장 정희, 귀여움을 맡고 있는 소진, 균형추를 맡고 있는 경희, 이렇게 셋이서 '무슨 생각을 해, 그냥 하는 거지'를 모토로 함께 열심히 개발했습니다.
프로젝트 소개
본격적으로 프로젝트를 소개하기에 앞서, 질문 하나 해볼게요. 다들 데브코스 슬랙에 있는 '학습 질의응답 채널', 잘 이용하고 계신가요? 질문을 많이 올려주는 분들도 계시지만, 궁금한 게 있어도 선뜻 질문을 올리지 못했던 분들도 있을 텐데요. 저도 '이런 질문을 해도 될까? 내가 놓친 부분에 답이 있었으면 어쩌지?' 하는 생각에 질문을 썼다 지웠다 한 적이 꽤 있습니다.
'그들만의 은밀한 공간'이라는 비공개 질의응답 채널이 만들어진 것도 수강생들이 공개적으로 질문을 올리기 부담스러워하는 것 같다는 이유 때문이었죠. 채널이 따로 개설될 정도로 많은 수강생들이 자유롭게 질문을 주고 받을 수 있는 공간을 필요로 한다는 것을 느낄 수 있었는데요. 저희 팀은 이처럼 온라인 실명 기반 커뮤니티에서는 질문을 자유롭게 주고 받기가 어렵다는 점에 주목했습니다.
다른 데브코스 수강생들도 공개된 채널에 질문하는 걸 어려워하는지 설문조사를 해봤습니다. 실제로 데브코스 백엔드, 프론트엔드 수강생 대상으로 총 40명에게 설문 조사를 진행한 결과, 학습 질의 응답 채널에 질문을 올린 사람의 비율보다 질문을 올리지 않은 사람의 비율이 더 높았습니다. 학습 질의 응답 채널에 질문을 올리지 못한 이유로는 남들 다 보는데에 질문을 올리기가 부답스럽다라는 답변이 40%로 가장 많았고, 질문의 수준이 너무 떨어지는 건 아닐까 라는 생각이 든다는 답변이 30%로 그 뒤를 이었습니다. 저희는 이 설문조사를 통해 공개된 채널에 질문을 올릴 때 상당수의 수강생들이 다른 사람들 눈에 내가 어떻게 비춰질지 의식하는 것이 질문 올리는 걸 어렵게 만든다는 사실을 알 수 있었습니다.
(발표자료에 복수응답 여부, 며칠 몇시까지 설문 받았음 명시해주기!)
그렇다면 어떻게 하면 커뮤니티 멤버들과 부담 없이 학습에 대한 질문을 주고 받고, 자유롭게 서로에 대한 진솔한 이야기를 나눌 수 있는지 고민하게 됐는데요.
그 결과, 커뮤니티 멤버들과 익명 기반으로 질의응답을 주고 받는 SNS 서비스, 큐리터를 기획하게 되었습니다.
큐리터의 이름은 질문을 뜻하는 영단어인 'Question'의 'Q'와 놀이터의 '리터'를 합친 단어로, '질문 놀이터'라는 의미를 담고 있습니다.
저희의 로고는 큐리터의 마스코트인 큐리의 얼굴인데요. 모두 보자마자 아셨겠지만 세미콜론이 눈이고 알파벳 Q가 입이에요. 놀이터라는 컨셉에 맞춰 재밌는 느낌을 주기 위해 윙크를 하면서 혀를 내밀고 있는 깜찍한 얼굴로 로고를 만들었습니다.
큐리터라는 이름의 뜻처럼 저희 프로젝트의 목표는, 데브코스와 같이 멤버들의 신원이 보장된 안전한 커뮤니티 안에서 하나의 놀이처럼 질문을 주고 받을 수 있는 공간을 만드는 것입니다.
기능 소개
다음으로 큐리터의 기능을 소개하겠습니다. 크게 4가지로 나눌 수 있는데요.
가장 기본적으로 질문과 답변을 제출하고, 수정하고, 삭제하는 기능이 있습니다.
좋아요를 표시할 수 있고, 또 내가 좋아요를 클릭한 질문과 내가 쓴 질문을 모아볼 수 있습니다.
게시글 상세보기 페이지에서 댓글을 남길 수 있습니다.
마지막으로 내 질문에 달린 댓글 알림을 받을 수 있습니다.
유저 시나리오를 통해 더 자세하게 큐리터를 들여다보겠습니다.
여기 온라인 기반 개발 교육 프로그램인 데뷔코스의 2주차를 지나고 있는 개발자 지망생 큐리가 있습니다. 큐리는 기반이 얕아 학습을 따라가기가 어려운데요. git도 익숙하지 않아서 과제를 어떻게 시작해야 할지 잘 모르겠습니다. '나말고 다른 수강생들은 다 알고 있는 것 같은데...'하는 마음에 물어보기가 창피합니다. 데뷔코스 멤버들은 슬랙으로 질의응답을 하고 있지만, 90명에게 공개된 채널에 질문을 올리는 것이 부담스럽게 느껴지기도 하는데요. 그 때 마침, 큐리는 매니저님이 공유해주신 익명 질문 SNS 서비스, 큐리터를 떠올립니다.
(시연하는 영상)
그럼 큐리와 함께 큐리터에 접속해보겠습니다. 큐리터에 들어가자 맨 먼저 로그인 창이 뜹니다.
큐리는 아직 회원가입이 되어 있지 않기 때문에 회원가입 버튼을 클릭해 회원가입을 합니다.
// validate 하는거 다 넣어주는 게 좋을 것 같아요! 시간 상 불가하다면 자를건 자르규용~~!
- 비밀번호 형식에 맞지 않아 에러가 떴습니다. 비밀번호 형식에 맞춰 다시 작성해줍니다.
회원가입을 완료하니 로그인 창이 뜹니다. 방금 가입한 정보로 로그인합니다.
로그인이 완료되면 홈 화면이 뜹니다. 상단에 바로 질문을 입력할 수 있는 질문 창이 있습니다. 질문을 입력하고 제출 버튼을 누르면 질문이 올라갑니다. 아, 그런데 오타가 있네요. 질문 카드를 클릭하면 질문에 달린 답변을 확인할 수 있는 상세 페이지가 나옵니다. 상단의 수정 버튼을 클릭하면 모달을 통해서 내용을 수정할 수 있습니다.
홈으로 가서 다른 질문을 구경해볼까요? 질문을 쭉 내리다 보면 로딩이 되면서 다음 질문들이 표시되네요. 위로 다시 올라가고 싶은 경우에는 최상단으로 이동하는 버튼을 클릭하면 됩니다. 이 질문에 답변을 달아볼까요? 질문 상세보기 페이지에서 직접 답변을 달 수 있습니다. 답변은 삭제만 가능합니다.
큐리는 이 질문이 마음에 든다고 하네요. 좋아요를 누르면 '좋아요한 질문' 탭에서 확인할 수 있습니다.
내가 쓴 질문 페이지로 이동하면 내가 작성한 질문만 모아볼 수 있습니다. 질문 카드를 클릭하면 홈 피드와 동일하게 상세보기 페이지로 이동합니다. 다시 보니 이 질문은 마음에 들지 않는 것 같네요. 삭제 버튼을 클릭해 질문을 삭제할 수 있습니다.
알림 아이콘을 누르면 알림 페이지로 이동합니다. 큐리가 작성한 질문에 대한 댓글을 확인할 수 있습니다. 이전에 확인 처리된 알림은 회색으로 출력되어 있습니다. 새로 들어온 알림을 확인해볼까요? 클릭하면 댓글이 달린 글로 이동해 댓글을 확인할 수 있습니다. (알림을 다 확인하면) 알림 페이지에서, 알림 전체 읽음 처리를 할 수 있습니다. (새로 들어온 알림 확인 전에는 댓글 하나 달아둬야 새로고침하면 들어옴) 또, 새로 들어온 알림은 없는지 새로고침 버튼을 통해서 알림을 받아 볼 수 있습니다.
(url에 말도안되는 주소 입력해서 보여주고) 큐리가 실수로 url에 잘못된 주소를 입력하였네요. 이 때를 대비해서 404 페이지가 준비되어 있습니다. 404 페이지를 통해 잘못된 경로임을 알려주고, 네비게이션을 통해 바로 올바른 페이지로 이동할 수 있습니다.
우측 상단 아바타를 클릭하면 메뉴가 뜹니다. 설정 탭에서는 내 계정 정보를 확인하고, 닉네임과 비밀번호를 변경할 수 있습니다.
끝으로, 로그아웃을 클릭하면 로그아웃되고, 다시 로그인 페이지로 이동합니다.
큐리터는 반응형으로 구현되어 있습니다. 모바일에서는 보고 계시는 것과 같이 네비게이션의 메뉴들과 설정, 로그아웃 기능을 햄버거 메뉴를 통해 접근할 수 있습니다.
기술 스택과 개발 방식
다음으로 개발에 사용한 기술 스택과 개발 방식을 소개하겠습니다.
저희 팀은 UI 라이브러리로 리액트를 선택했습니다. 또한, UI 컴포넌트 개발 도구인 스토리북을 도입해 컴포넌트 주도 개발 방식으로 작업했습니다. 아토믹 디자인을 적용해 가장 작은 UI 컴포넌트 단위인 아톰부터 만들고, 컴포넌트 조합으로 더 큰 단위의 컴포넌트를 만들어나가는 바텀 업 방식으로 개발을 진행했습니다.
상태 관리는 라이브러리를 사용하지 않고, Context API를 활용했습니다. 스타일 라이브러리는 CSS in JS 중 하나인 Emotion을 선택했고, UI 디자인 툴인 Figma를 사용해 디자인 시안을 잡았습니다. 배포는 netlify 서비스를 이용했습니다.
향후 업데이트 계획
마지막으로 향후 업데이트 계획입니다.
큐리터는 원래 커뮤니티 기반으로 기획된 서비스입니다. 기획했던 대로라면 유저는 초대 코드를 통해서만 특정 워크스페이스에 들어갈 수 있도록 개발되어야 합니다. 또한, 관심사를 기반으로 질문을 주고 받을 수 있도록 아이스 브레이킹, 학습, 맛집, 취미 등 다양한 채널을 생성할 수 있도록 기능을 개발할 예정입니다. 더 풍부한 질문과 답변을 나눌 수 있도록 이미지를 업로드하는 기능과 답변에 좋아요를 찍을 수 있는 기능도 개발하려고 합니다. 더 나아가 더 재밌게 질문과 답변을 주고 받을 수 있도록 게임 같은 요소가 가미된 버전으로 서비스를 발전시키고 싶습니다. 실제 사용자에게 서비스를 배포할 수 있을 때까지 열심히 리팩토링 해보겠습니다.
그럼 이상으로 큐리터 프로젝트의 발표를 마치겠습니다. 감사합니다.