Recent Posts
Recent Comments
Archives
반응형
250x250
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Today
Yesterday

Total
05-11 04:43
관리 메뉴

Hey Tech

MZ오피스 테스트: MZ력/꼰대력 테스트 해보기! 본문

SW 개발/프로젝트 소개

MZ오피스 테스트: MZ력/꼰대력 테스트 해보기!

Tony Park 2023. 3. 6. 02:22
728x90
반응형

🙏 들어가며

본 포스팅에서는 직접 기획부터 개발까지 주도한 MZ오피스 테스트 서비스를 소개합니다.

📚 목차

1.  개요
2.  서비스 흐름도
3.  서비스 상세 소개
4.  기술 스택

📌 1.  개요

그림 1. 'MZ오피스 테스트'의 메인 페이지

본 서비스는 장안의 화제였던 코미디 프로그램 SNL코리아MZ오피스 코너의 소재를 각색하여, MZ오피스에 어떤 등장인물과 닮았는지 MZ력과 꼰대력을 확인해 보는 스낵(snack) 콘텐츠입니다. MZ오피스는 MZ세대와 기성세대가 공존하는 사무실에서 벌어지는 다양한 일화를 각 세대와 등장인물별 특징을 코믹하게 그려낸 콘텐츠입니다. 총 8가지 상황이 주어지는 문항에 각각 이지선다형으로 본인이라면 어떤 생각과 행동을 할지 선택하면 MZ력과 꼰대력을 평가합니다. MZ력/꼰대력 점수에 따라 MZ오피스에 등장하는 인물의 특징을 고려하여 맵핑해 결과 풀이를 제공합니다. 여기서 MZ력이란 얼마나 MZ스럽냐, MZ세대와 얼마나 닮아있느냐의 척도입니다. 반대로, 꼰대력은 젊은 꼰대나 전통적인 위계질서나 사내규율을 강조하는 꼰대 세대의 유형과 유사한 정도입니다. 프론트엔드는 React로, 백엔드 인프라는 AWS를 활용하여 구축하였습니다.
 
🔗 본 서비스는 하기의 링크를 통해 회원가입 없이 무료로 이용하실 수 있습니다.
 
https://mzofficetest.click/

 

MZ오피스 테스트

 

mzofficetest.click

📌 2.  서비스 흐름도

그림 2. 서비스 흐름도

서비스 흐름도는 위의 그림 2와 같습니다. 페이지는 크게 메인(home) 페이지, 질문/답변 페이지, 결과 페이지로 총 세 부분으로 나눌 수 있습니다. 메인 페이지에서 'Start' 버튼을 클릭하면 질문/답변 페이지로 이동합니다. 질문 8가지에 대해 차례대로 이지선다형으로 선택을 완료하시면 결과 페이지에서 MZ오피스 내 어떤 인물과 가장 닮았는지 확인할 수 있습니다.

📌 3.  서비스 상세 소개

3.1. 메인 페이지

그림 3. 메인 페이지

메인 페이지는 위의 그림 3과 같습니다. 서비스 Identity를 보여주는 서비스 이름('MZ오피스 테스트')과 문구를("나는 MZ오피스 속 어떤 인물?", "내가 맑은 눈의 광인..?") 기입하였습니다. Start 버튼을 클릭하시면 질문/답변 페이지로 이동합니다. 하단에 '공유하기' 버튼 그룹에는 좌측부터 차례대로 페이스북, 페이스북 메시지, URL복사, 카카오톡 링크 공유하기 버튼을 배치하였습니다. 공유 버튼 하단에는 현재까지 테스트한 누적 사용자 수를 환생한 수로 프레임을 씌워 개괄적인 수치로 제공합니다(i.e., 5만 명+).

3.2. 질문/답변 페이지

그림 5. 질문/답변 페이지

질문/답변 페이지는 위의 그림 5와 같이 총 8개의 질문과 각각에 2가지 답변문항으로 구성하였습니다. 상단에는 Progress Bar를 활용하여 사용자가 전체 문항 중 얼마나 답변을 완료했는지, 현재 상태를 인지할 수 있도록 설계하였습니다. 사용자 관점에서 설문지나 심리 테스트와 같은 서비스를 설계할 때는 반드시 사용자가 현재 어느 상태에 있는지 알려줘야 합니다. 즉, 전체 질문지 중 얼마나 답변을 완료하였고, 얼마나 질문지가 남아있는지 알려주는 것이 중요합니다. 위와 같은 Progress Bar는 사용자 스스로 질문 task를 완수하는 데 필요한 시간을 대략적으로 계산할 수 있기 때문에, 부정경험은 줄이고 답변을 완수하는 데 도움을 줄 수 있습니다.

3.3. 결과 페이지

그림 6. 결과 페이지

위의 그림 6은 결과 페이지입니다. 사용자의 답변 결과에 따라 총 캐릭터 16명 중 한 명으로 맵핑한 결과를 제공합니다. 상단에는 캐릭터를 한 마디로 정의할 수 있는 문구와 함께 각 인물의 등장화면과 대사를 첨부하였습니다. 하단에는 해당 인물의 성격/행동의 간략한 특징을 정리하였습니다. 바로 하단에 REPLAY 버튼을 클릭하면 메인 페이지로 이동합니다. 

그림 7. 결과 페이지 전체

위의 그림 7과 같이, 하단에 '공유하기' 버튼 그룹에는 좌측부터 차례대로 페이스북, 페이스북 메시지, URL복사, 카카오톡 링크 공유하기 버튼을 배치하였습니다. 공유하기 버튼 그룹 하단에는 다른 테스트도 체험해 볼 수 있도록 배너링크를 추가하였습니다. 해당 서비스 이름을 클릭하시면 회원가입 없이 무료로 체험할 수 있습니다.

1) 재벌집 막내아들 테스트

첫 번째로는 2022년 화제의 드라마(수도권 최고 시청률 30%) <재벌집 막내아들> 소재를 중심으로 성격유형 테스트(MBTI)를 각색하여 개발한 웹 서비스입니다(링크). 등장인물과 줄거리 내용을 기반으로 재구성한 상황을 가정하여, 사용자 본인은 어떤 행동과 생각을 할지 이지선다형으로 답하는 테스트입니다.

2) 카톡분석 왕 테스트

 두 번째로는 카톡 대화 내용 속 키워드 분석을 통해 대화방 내 사용자들의 성격/취향/성향을 MBTI(성격 유형 테스트)와 유사하게 어떤 왕(king) 유형인지 분석해 주는 웹 서비스입니다(링크). 생각은 말로 나오고, 말이 행동하게 만들며, 행동이 습관을 형성하고, 습관이 인격이 된다는 말이 있듯이, 본 서비스는 사용자들이 빈번하게 사용하는 키워드 분석을 통해 사용자 성격/취향/성향 유형을 판단합니다.

3) 럭키토끼 테스트

2023년 검은 토끼의 해인 계묘년(癸卯年)을 맞이하여 신년 운세를 확인해 보는 웹 서비스입니다. 총 6가지 상황이 주어지는 문항에 각각 이지선다형으로 본인이라면 어떤 생각과 행동을 할지 답변하면 운세를 고려한 토끼 캐릭터와 함께 운세 풀이를 제공합니다(링크).

📌 4.  기술 스택

프론트엔드는 React로, 백엔드 및 인프라는 AWS를 활용하여 개발하였습니다. 사용한 AWS 서비스는 하기와 같습니다.
 
1) Lambda
- 유입 시간, 사용자 수 tracking
 
2) DynamoDB
- 유입 사용자 시간/수 저장
 
3) API Gateway
- API 활용
 
4) S3
- 웹 호스팅
 
5) CloudFront
- 배포
 
6) Route53
- 도메인 활용
 
🔗 본 서비스는 아래 링크를 통해 회원가입 없이 무료로 체험 가능합니다.
https://mzofficetest.click/

 

MZ오피스 테스트

 

mzofficetest.click

🔗 참고 블로그

끝으로, 본 서비스를 위해 협업한 개발자분들의 블로그 링크를 공유합니다.
https://dbstndi6316.tistory.com/

 

코딩뚠뚠

 

dbstndi6316.tistory.com

https://blog.naver.com/klm960

 

앵무의 조잘조잘 스토리 : 네이버 블로그

하루하루를 기록 중입니다 ( •̀ω•́ )✧

blog.naver.com

👨‍💻 참고할 만한 포스팅

1. [SW개발] 카톡 분석 기반 성향 테스트 '카톡분석 왕 테스트' 소개
2. [SW개발] 드라마 재벌집 막내아들 테스트: 나는 재벌집 어떤 막내?
3. [SW개발] 럭키 토끼 테스트: 계묘년 신년 운세 테스트 소개
4. [SW개발] MZ오피스 테스트: 나의 꼰대력/MZ력은?
5. [SW개발] ChatGPT 기반 전생 스토리 서비스 소개


포스팅 내용에 오류가 있다면 댓글 부탁드립니다.
그럼 오늘도 즐거운 하루 보내시길 바랍니다 :)
고맙습니다😊

728x90
반응형
Comments