나무로 보는 남이 써주는 나의 소개서, 남의위키(namuiwiki)

🔗 namui-wiki.life

IT 서비스 메이커들의 소셜 네트워크, Disquiet 트렌딩 프로덕트 1위 달성!

📜 Contents

해당 프로젝트는 IT 비영리 단체 DND에서 진행한 웹프로젝트며, 이후 팀원들끼리 지속적인 유지,보수를 진행하고 있습니다. 현재 ver. 1.2.1 까지 배포되어있는 상태입니다.

1. Intro

연예인들의 나무위키처럼, 다양한 사람들이 나에 대한 정보를 기록해주고, 모아보고, 이를 읽어본다면 재미있는 서비스가 되지 않을까에서 시작하게 되었습니다. 남들이 적어주는 나만의 나무위키가 있는 것이죠!

2. Ideation

남의위키를 통해 타인으로부터 보여지는 나의 모습을 파악하고, 자신에 대해 새롭게 알고 싶어하는 사람들의 니즈를 반영하고자 했습니다. 타인의 눈으로부터 본 나를 발견하고 탐구하는 소셜 플랫폼으로서, 다양한 사람들 속에서 형성되는 나의 여러 모습을 확인하며 나에 대한 이해를 돕고자 하는 서비스를 만들고자 했습니다.

3. Service Introduction

서비스 특징

다양한 관점의 나

남의위키는 첫인상부터 시간이 지나면서 변화하는 인상까지, 다양한 시점에서 ‘나’를 바라본 사람들의 생각을 확인할 수 있어요. 첫 만남에서의 나와, 시간이 지나 친해진 후의 나를 모두 볼 수 있어, 자기 자신에 대한 새로운 인사이트를 얻을 수 있어요.
심층적인 소셜 네트워킹

남의위키는 단순한 정보 교환을 넘어서, 사람들이 서로를 이해하고 의미 있는 관계를 맺을 수 있는 깊이 있는 소셜 네트워킹을 추구해요. 친구, 동료, 신입생, 사회 초년생 등 다양한 사회적 상황에서 사람들이 서로에 대해 더 쉽게 알아갈 수 있어요.
아이스브레이킹과 커뮤니케이션

남의위키는 새로운 사람들과 만나는 자리에서 아이스브레이킹을 쉽게 할 수 있도록 도와줘요. 처음 만난 사람들과의 자연스러운 대화를 위한 트리거로 사용될 수 있으며, 소통에 필요한 중요 정보들을 제공해요.

4. Field Research

주제

다른 사람이 생각하는 내 모습

가설

사람들은 다른 사람들에게 나를 알리고 싶어하며, 다른 사람이 나에 대해 어떻게 생각하는지 궁금할 것이다.
사람들은 만나는 사람에 따라 성격이 달라지고, 성격이 어떻게 달라지는지 알고 싶어한다.

설문조사

인사이트

4. Process

🗞️ 설문의 질문은 어떻게 선정되었나요?

팀 내에서 각자의 경험을 바탕으로 질문 목록을 작성했어요. 이 선별된 질문 목록과 필드 리서치 답변을 토대로 질문 리스트를 만들었습니다.

🗞️ “나무” 와 “정원” 은 어떤 의미인가요?

서비스에 상징적인 캐릭터를 선정하기 위해 아이디어 회의를 진행했어요.

‘시간이 지남에 따라 성장하고, 다양한 관점의 나를 표현하기 좋은 아이템을 선정하자!’ 라는 주제로 아이데이션을 진행했고 어항, 수족관, 인삼, 군대 계급 등의 다양한 의견이 나왔어요. 이 중 ‘나무’와 ‘정원’은 성장과 연결성을 상징하는 강력한 이미지로 남의위키의 핵심 가치와 일치했어요. 이는 개인이 서로의 관점을 통해 시간이 지남에 따라 성장하고, 커뮤니티 안에서 다양한 관점을 표현하기에 적절한 소재라고 생각했어요.

🔎 Feature

⚒️ Develop

2023 SOFTCON 출품 당시 : 프론트엔드1, 백엔드1, 기획1
2024 리팩토링: 프론트엔드2, 백엔드2, 기획1

✅ Core Role

팀장
- 일정 및 스크럼 관리 공지 전달 담당
- 전반적인 팀 관리

Frontend

페이지 및 UI 토큰 구현
내 정원 페이지 구현 및 연동
나무 카드 구현
설문지 Form 구현 및 연동

Details of Features

Funnel을 활용한 설문지 Form 구현

toss/slash의 퍼널에서 영감을 받은 컴포넌트 Funnel을 구현했습니다. 단계별로 사용자의 경로를 구현하기 위해 사용되는 createFunnel함수와 useFunnel 훅을 사용합니다.


const createFunnel = <T extends readonly string[]>(steps: T) => ({
  Funnel: Funnel<T>,
  Step: Step<T>,
  useFunnel: () => useFunnel(steps),
})

...


  const fieldList = useMemo(
    	() => ['senderName', 'knowing', ...questions.map((item) => item.id)],
    	[questionss],
  	)

  const { Funnel, Step, useFunnel } = createFunnel(fieldList)
  const { step, toPrevStep, toNextStep, hasPrevStep } = useFunnel()

각 step의 name으로 사용할 스텝들을 정의했습니다. Funnel의 상태는 커스텀 훅 useFunnel에서 관리되고 있습니다. 훅은 현재 단계를 추적하고, 이전 단계로 이동하거나 다음 단계로 이동하는 기능을 제공합니다.

return (
   <Funnel step={step}>
  	<Step name="senderName" key="senderName">
     ...
    </Step>
 	<Step name="knowing" key="knowing">
     ...
    </Step>
     ...
  </Funnel>
);

Funnel 컴포넌트에 저장하여 정의한 스텝의 순서대로 화면을 렌더링 해줍니다.

이를 통해 닉네임, 알게 된 경로와 알게 된 기간을 입력받은 뒤 설문 폼으로 이어져 배열에 등록된 순서대로 컴포넌트를 보여주게 됩니다. 훅에 반환된 내용들을 Funnel 컴포넌트에 전달하여 스텝 별로 값을 넘겨줍니다. Form이 Submit 되기전 필요한 value들을 효율적으로 처리할 수 있습니다.

⛏️ Growing Points

1. 기술 스택

Next 14 Page Router
Typescript
Tailwind CSS
Framer-Motion
Zustand
React-Query
Storybook
클라이언트 배포 : Vercel

2. 최종발표 및 시연

DND 최종 프로젝트 발표와, 진행상황에 대한 공유를 진행했습니다. DND 공식 사이트 내 프로젝트 소개 링크

3. 에러 대응 및 QA

최종 프로젝트 이후에도 꾸준한 프로젝트 디벨롭을 진행했습니다. 유저로부터 다이렉트로 오는 QA 사항들과 Sentry를 활용한 에러모니터링을 통한 개선사항을 반영했습니다. 해당 QA 사항들과 피드백들을 수집하여 2주 간 QA 기간을 가졌고, 2024년 3월 중순 1차 정식 오픈했습니다.

3일간 약 350명의 유저와 500개 이상의 위키가 작성되었습니다.

오픈 1개월 차 현재(2024.4기준) 약 1000명의 유저와 1300개 이상의 남의위키가 작성되었습니다.

QA 사항 이슈 관리

프론트엔드에서는 해당 포지션에서 발생하는 이슈와 버그들을 github issue에 등록하고,PR로 구현사항과 작업내용을 공유했습니다.

4. 에러 대응과 트러블 슈팅

1) 버전 대응 (좌 - ios17 버전 이하에서 발생하는 오류)

🚨 문제 배경

일부 팀원의 휴대폰에서 나무 카드를 플립했을 때 뒷면에서 답변을 자세히보기 버튼과 보낸사람 이름이 노출되지 않는 오류를 발견했습니다.

⭐️ 해결 과정

카드 디자인의 css 호환 문제라고 판단하여 3d 변환을 적용하고, -webkit-backface-visibility: hidden을 적용하는 등 다양한 시도를 했습니다.

나무카드가 플립된 후 background-color는 정상적으로 노출되고 있는 것을 통해 부모 요소에 해당하는 card가 아닌 자식요소 card-back 의 문제임을 알게 되어 자식요소를 재정의하고 스타일링 값을 각각의 요소에게 적용하는 방식으로 해결했습니다.

이 과정에서 버전 별 이슈가 발생할 수 있다는 점을 고려하며 다양한 문제에 대응하는 경험을 해보았습니다.

2) 예상하지 못한 예외 화면들에 대한 구현

🚨 문제 배경

만약 유저가 받은 답변이 전부 직접입력만 있는 경우 어떻게 차트들을 보여줄 지에 대한 고려가 전혀 없었던 와중, 문제가 제기 되었습니다.

⭐️ 해결 과정

아주 간단하고 사소한 디테일인 직접입력이 100%인 경우를 대비한 화면을 분기 처리했습니다. 다양한 예외사항에 대한 컴포넌트 설계와 화면 구현이 유저에게 더 좋은 서비스 경험을 제공해줄 수 있다는 걸 깨달을 수 있었습니다.

  {orderByMaxValueList?.[0].legend} === '직접입력' ? (
    <span>친구가 써준 답변을 확인하세요 </span>
            ) : (
    <span> 가장 중요한 것은 <b>
                  {orderByMaxValueList?.[0].legend} </b>
                이네요 </span>
            )

⭐️ 해결 과정

5. 유저 피드백을 반영한 신규 기능 배포

- 나도 써주기 기능

배포 이후 유저들의 피드백 중 나에게 위키를 써준 사용자에게 링크를 전달 받지 않고, 서비스 내에서 바로 해당 유저의 위키 작성페이지로 이동하고 싶다는 요청을 받아, 해당 기능을 추가하였습니다. 이 과정에서 사용자의 사용성을 위해 자세히 보기 버튼을 바텀시트 형태로 변경하여 다양한 기능의 확장성을 염두에 두었습니다.

-인스타그램으로 내 결과 공유하기

SNS 공유용 템플릿을 따로 제작하여 자신이 받은 답변 중 공유하고 싶은 답변을 골라 게시할 수 있는 기능을 추가하였습니다. 자신에 대해 알고 싶고 표현하고 싶어하는 욕구가 강하다는 필드 리서치의 결과에 따라 다양한 사용자가 재밌게 이용할 수 있는 기능이 되었습니다.

이외에도 설문 상세보기, 질문별 답변 보기, 내가 쓴 위키보기 등 다양한 기능을 추가로 구현했습니다.

현재는 남의위키 내에 나를 알고자 하는 기본 설문지가 존재합니다. 확장성을 위해 대시보드와 설문 템플릿을 리팩토링하고, 연애위키 설문지를 제작하여 버전 2를 배포할 예정입니다.

6. 수준 높은 팀 커뮤니케이션

과제로 팀 내회고때 나온 의견을 반영하여 그라운드 커뮤니케이션룰을 만들어 진행했습니다. 슬랙 리액션으로 팀원들의 확인여부를 체크할 수 있도록 하여 비효율적인 커뮤니케이션을 줄일 수 있었습니다.
2달간 매주 화요일 9시 정기회의과 스크럼을 진행하여 과제 제출을 위한 자료와 프로젝트에 필요한 회의 안건들을 공유하여 팀원들간의 소통을 활발하게 하고자했습니다.
회의가 끝난 이후에도 작업할 사람들은 디스코드에 남아 지속적으로 소통하며 함께 작업하고자 했던 것이 좋은 결과를 이끄는데 많은 도움이 되었습니다.
그외에도 개발자들 간의 PR, 코드, ISSUE, branch 컨벤션과 룰을 정해 효율적인 협업을 도모했습니다. 현재까지도 다양한 기능을 추가하고, 배포하는 데에 문제 없이 활용하고 있습니다.

- 🔗 namui-wiki.life
📜 Contents
🔎 Feature
⚒️ Develop
- Details of Features
⛏️ Growing Points