00. 어쩌다가 이렇게 귀한 곳에 누추한 분이..?
안녕하세요, Sound AI 회사, **Cochl** 에서 Developer Relations Manager로 일하는 장민서 입니다. 간단하게 제가 담당하는 직무에 대해 소개해 드리자면!
[Developer Relations Manager?]
- 개발 조직의 문화를 만들어가고, 회사가 보유한 기술·프로덕트를 내·외부에 공유하며 개발 조직과 외부 커뮤니티를 긴밀하게 연결해주는 역할을 하는 사람
저는 개발을 하나도 몰랐던 (지금도 모르는) 사람이지만 이전까지의 커리어를 바탕으로 데브렐 일을 시작할 수 있었습니다. 그리고 좋은 기회로 원티드와 GDSC가 함께 한 GDSC Job Fair 2022 행사에 참여하게 되었습니다.
행사를 앞두고 초보 데브렐 매니저는 고민하게 됩니다.🤔🤔
🤔 그제의 장민서: 'Job Fair'이니까 채용 설명만 준비하면 될까?
🤦♀️ 어제의 장민서: 뭔 소리야..! 우리를 알려야 채용 설명이 따라오지 않겠어?
🤷♀️ 오늘의 장민서: 아니,, 그러면 뭘 준비해야 할까 도대체?!
https://labs.cochl.ai 에서 우리 회사가 보유한 다양한 기술을 체험해볼 수 있지만, 행사에서 사용하기엔 아쉬운 점들이 있었습니다.
[Labs를 사용하지 않았던 이유는?]
- 너무 많은 콘텐츠가 있어 정보의 선택이 어려움
- 부스 운영 특성상 더 짧고, 간결한 콘텐츠가 필요함
그 대신 저는 짧고, 사람들이 재미를 느낄 수 있는 콘텐츠를 만들어 보기로 했죠!
바로 MBTI 테스트를 활용해보기로 하였습니다. 🤗🤗
01. 아니 MBTI 테스트요?
갑자기 왜 때문에 MBTI 테스트? 🤷♀️
[갑자기 MBTI 테스트에 꽂힌 이유는?]
- 사람들이 직접 체험해 볼 수 있는 콘텐츠
- 소리 데이터에 대한 흥미 제공
- 쉽고, 간편한 참여 방식
- 그냥 내가 좋아함
- 예를 들어 총소리와 총소리를 닮은 가짜 소리(=위양성 데이터)를 구별하는 것이 사람의 귀로는 쉽지 않다는 것을 체험
개발을 할 줄 알았더라면 0부터 차근차근 만들어 나갈 수 있었겠지만, 처음부터 차근차근 학습하기에는 시간이 많지 않았습니다.
빠르게 뼈대를 만들 수 있는 최적의 방법은 강의와 샘플 코드를 습득하는 것이라고 느꼈고, 그렇게 인프런에서 저의 구세주 1호를 만나게 됩니다.
👉👉👉 인프런 강의로 바로가기
판다코딩님의 강의를 통해 MBTI 테스트 페이지가 갖춰야 할 기본 구성에 대해서 빠르게 학습할 수 있었습니다.
[내가 배운 것 ✌️]
- 메인 페이지 - 질문 페이지 - 결과 페이지 구성
- 각 문제별 답안을 통해 결과 페이지 연결
- 화면이 넘어갈 때 부드럽게 넘어갈 수 있는 애니메이션
- MBTI 테스트에 필요한 각종 Javascript 문법
MBTI 테스트를 만드는 코드를 이해하는 데 많은 도움을 받았습니다 🙏🙏
판다코딩님의 코드를 기반으로 큰 틀을 쓱쓱 그려 나갈 수 있었습니다 😇
하~지~만~ 기쁨을 느낄 새도 없이, 다른 난관에 봉착하게 됩니다..
판다코딩님의 MBTI 테스트와 제가 원하는 결과물에는 큰 차이점들이 있었기 때문입니다. 그리고 이건 제가 직접 해결해야 할 문제였죠 :(
[나를 괴롭게 한 것들 🤬🤬]
- 각 문제별로 오디오 파일이 재생되어야 함 (new)
- 정답을 맞힌 개수에 따라서 결과페이지가 달라져야 함 (new)
그래서 제가.. 이 문제를 어떻게 해결했을까요?
02-1. 1번 문제 해결기
- 1번 문제: 각 문제 별로 오디오 파일 재생
- 오디오 파일을 재생하는 Javascript 코드 넣기
스크린샷에서 확인할 수 있듯이 중간에 있는 이어폰 버튼을 클릭하면 소리가 재생돼야 했습니다.
data.js 파일
const qnaList = [
{
q: '1. 이 소리는 언제 들릴까요?',
a: [
{ answer: '자동차 후진 시 후방센서에 무언가가 감지될 때!', correct: false },
{ answer: '전자레인지 조리가 완료 되었을 때!', correct: true },
{ answer: '냉장고를 너무 오래 열어뒀을 때!', correct: false },
],
audio: "audio-1.mp3",
},우선은 각 문제와 답이 나와 있는 data.js파일에 오디오 파일 정보를 함께 넣어 주었습니다.
start.js 파일
function createAudioButton() {
var playAudio = document.querySelector('.audio');
playAudio.addEventListener("click", function () {
var audio = new Audio("sound/" + qnaList[currentQuestion].audio);
audio.load();
audio.loop = false;
audio.volume = 0.5;
audio.play();
}
)
playAudio.addEventListener('ended', function () {
audio.pause();
})
}그리고 start.js 파일에 오디오 기능을 해줄 수 있는 코드를 작성했습니다.
지금은 웃으면서 말할 수 있었지만 처음 짠 코드를 돌렸을 때는 오디오 파일이 중첩되는 현상이 나타났습니다.😱😱😱
- 내가 원했던 것
1번 문제 -> 1번 오디오 파일
2번 문제 -> 2번 오디오 파일
- 처음으로 짠 코드
1번 문제 -> 1번 오디오 파일
2번 문제 -> 1번 오디오 파일 + 2번 오디오 파일
(그리고 그 광경을 실시간으로 보고 있는 나..)
이걸 어떻게 처리해야 할지도 막막하고, 뭐가 문제인지도 몰라서 일단 울어봤습니다. 울면 뭐해요,, 전 다 큰 어른이고, 이미 회사에다가 나는 엄청난 걸 만들고 있어! 하고 허풍을 떨어놨으니... 해야죠 :(
다행히 며칠 간의 삽질 끝에 정답을 알아냈습니다!🥳🥳🥳
제가 잘못 작성한 코드에서는 addEventListener 를 계속 불러내고 있더라고요.
한 번 발생한 이벤트는 다음 페이지로 넘어갈 때 종료가 돼야 하는데, 그 부분을 짜지 않아 이벤트가 중첩되어 발생해서 벌어진 해프닝이었습니다. (머쓱)
하나의 이벤트를 끝낸 후 -> 다음 이벤트 실행하게끔 코드를 수정하니 바로 되었다..^^..
물론 더 빠르고 예쁘게 해결할 방법이 있겠지만 저는 최선을 다했습니다..!
02-2. 2번 문제 해결기
- 2번 문제: 정답률에 따른 결과 페이지 보여주기
- 계산은.. 누가, 어떻게 할래?
data.js 파일
const qnaList = [
{
q: '1. 이 소리는 언제 들릴까요?',
a: [
{ answer: '자동차 후진 시 후방센서에 무언가가 감지될 때!', correct: false },
{ answer: '전자레인지 조리가 완료 되었을 때!', correct: true },
{ answer: '냉장고를 너무 오래 열어뒀을 때!', correct: false },
],
audio: "audio-1.mp3",
},const infoList = [
{
name: '지금까지 이런 귀는 없었다, 100%의 적중률! 황금귀',
desc: '무려 10가지 소리를 모두 다 맞추셨다구요? 진짜 어려운 문제도 섞어놨는데 이럴 줄은 몰랐다구요~! <br><br> 10가지 소리를 다 맞춘 당신은 세상에 관심이 많은 분일 것 같아요. 남들은 그냥 지나칠 수도 있는 사소한 것들도 다 귀 담아 듣고, 궁금해하죠. 그렇다 보니, 이런 것 까지 기억해주는거야? 라는 말도 주변 사람들에게 많이 들을 것 같은데 어떤가요? <br><br> 세상을 남들보다 더 풍부하게 사는 당신을, Cochl에서 AI대신 HI (Human Intelligence)로 스카우트 하고 싶습니다! 함께 하시겠어요?',
}
]아까 보여준 data.js파일에 나와있듯, qnaList에는 질문, 정답, 오디오 파일도 있지만 어떤 답이 정답인지에 대한 정보도 확인 할 수 있습니다. 그리고 전체 질문 중 정답 갯수에 따라 infoList에는 각기 다른 결과 데이터를 작성했습니다.
이제 제게 남은 미션은 사람들이 누른 답과 정답을 비교해서
1) 몇 개를 맞췄는지 계산하고
2) 그에 맞는 결과 페이지를 보여주는 것입니다.
우선 저는 결과 페이지의 기준을 다음과 같이 정해뒀습니다.
[결과 페이지 기준]
- 10개 -> 황금귀
- 8,9개 -> 임금님귀
- 5,6,7개 -> 부처님귀
- 2,3,4개 -> 아기귀
- 0,1개 -> 걱정되귀
그런 다음 사람들이 문제를 풀 때 'correct' 한 값의 버튼을 누르면 score에 1점을 추가 -> 모든 문제가 끝났을 때 score 값에 따라 다른 결과 페이지 를 보여주게 했습니다.
const endPoint = 10;
let currentQuestion = 0
let score = 0
//calculation 하는 거 여기 넣어줘야함!!
function calResult() {
if (score == 10) {
return 0;
}
else if (7 < score && score <= 9) {
return 1;
}
else if (4 < score && score <= 7) {
return 2;
}
else if (1 < score && score <= 4) {
return 3;
}
else {
return 4;
}
}
function setResult() {
let point = calResult();
const resultName = document.querySelector('.resultname');
resultName.innerHTML = infoList[point].name;
var resultImg = document.createElement('img');
const imgDiv = document.querySelector('#resultImg');
var imgURL = 'img/image-' + point + '.jpeg';
resultImg.src = imgURL;
resultImg.alt = point;
resultImg.classList.add('img-fluid');
imgDiv.appendChild(resultImg);
const resultDesc = document.querySelector('.resultDesc');
resultDesc.innerHTML = infoList[point].desc;
}
function addAnswer(answerText, qIdx, idx) {
var a = document.querySelector('.answerBox');
var answer = document.createElement('button');
answer.classList.add('answerList');
answer.classList.add('my-3');
answer.classList.add('py-3');
answer.classList.add('mx-auto');
answer.classList.add('fadeIn');
a.appendChild(answer);
answer.innerHTML = answerText;
answer.addEventListener("click", function () {
var children = document.querySelectorAll('.answerList');
for (let i = 0; i < children.length; i++) {
children[i].disabled = true;
children[i].style.WebkitAnimation = "fadeOut 0.5s";
children[i].style.animation = "fadeOut 0.5s";
}
setTimeout(() => {
var target = qnaList[qIdx].a[idx];
for (let i = 0; i < target.length; i++) {
console.log("select")
console.log(select)
select[target[i]] += 1;
}
for (let i = 0; i < children.length; i++) {
children[i].style.display = 'none';
}
if (target.correct) {
score++
}
console.log(score)
goNext(++qIdx)
}, 450)
}, false);
}
모든 정답을 맞춘 분께는 이 화면이 보일 것입니다 후후 (｡•̀ᴗ-ღ) 😈😈
03. 그래서 어땠나요?
행사장 내 저희 부스 위에 살포시 체험해 보실 수 있도록 세팅해두고, QR코드도 준비해뒀습니다. 테스트 후 결과 페이지를 저희에게 보여주시면, 귀 밝아지시라는 의미에서 🥂귀밝이술 = 감주🥂 를 한 잔씩 드렸습니다!
재미있었던 부분은 많은 분이 자신 있게 임해주셨지만, 100% 정답률을 보이신 분은 없었다는 것~~ ˘◡˘˘◡˘ 생각보다 어렵다고요~~!
마지막으로 간단하게 제가 행사를 준비하면서, 그리고 진행하면서 느꼈던 점을 공유합니다!
[ 🧚♀️ Developer Relations Manager로서 느낀 점]
- DevRel 매니저도 어느 정도의 개발 능력은 필요하다. 본인이 기술을 대중들에게 어떻게 보이고, 설명할 수 있는가에 대해서는 많은 방법이 있겠지만 사람들이 직접 체험하고 몸소 느끼게 만드는 것이 기술에 대한 설득력을 부여하는 가장 쉽고 빠른 방법이다.
- 행사에는 SW Engineer, Researcher 직군에 관한 관심이 가장 높았으나, 그와 동시에 'Devrel Manager'가 되고 싶은 분들도 많이 만날 수 있었다. 한국에서 Devrel이 더 이상 minor한 영역이 아니라는 것을 느꼈고, K-Devrel(채용 중심의 Devrel)이 아닌 나만의 고유한 무기 (커뮤니티 매니징, 콘텐츠 제작, 개발 능력, 커뮤니케이션 스킬)를 갖추는 것이 더욱 중요해질 것이다.
이다음엔 또 어떤 삽질을 직접 해볼진 모르겠지만, 뿌듯한 경험이었습니다.
지금부터라도 개발 공부를 꾸준하게 가져가야 할 것 같아요. 😂😂
const가 뭔지, addEventListener가 무엇인지 이해를 바탕으로 하지 않고 무지성으로 때려 넣다 보니 찐 개발자 분들이 보시기엔 괴상한 코드로 이루어진 서비스(?)지만 개인적으로는 많이 배운 프로젝트였습니다!
어머나! 이 글을 읽으시면서 한번 해보고 싶다는 생각이 드셨다고요? (•̀ᴗ•́)و ̑̑
그렇다면 👇👇 아래 링크 👇👇 눌러주시면 감사하겠습니다!
💙 황금귀 테스트 (Link)
💙 황금귀 테스트 github (Link)
💙 Cochl 홈페이지 (Link)
💙 Cochl과 Coffee Chat 하기 (Link)
부족함이 많은 글이었지만, 짧게나마 회고를 남겨 보았습니다.
오래간만에 이런 글을 쓰는 거라 어색한데 혹시라도 제가 잘못 작성한 부분이 있다면 너그러이 용서해주시고, 조용히 콕 찔러 주세요 :)
