[증명 3~5일차] 웹품타

SeHoony·2022년 7월 5일
1

J커브 성장일지

목록 보기
3/5

1. 오늘은

지난 4일동안 준비했던 '웹품타' 어플리케이션 시연 발표가 있었다. 우리 팀은 주어진 시간동안 두 가지 주제를 준비했고, 팀도 두 조로 나뉘어 프로젝트를 기획했다. 나는 혜원이와 함께 두 명으로 조가 구성되었고 우리는 '열품타'를 웹 버전으로 구현한 '웹에서 품은 타이머, 웹품타'를 기획했다.

문제 인식 및 문제 정의

현재 우리의 가장 큰 문제는 '공부의 효율성을 극대화하는 것'이다. 이 문제 해결을 위해 '열품타'는 적절한 앱이 맞는가가 문제 인식의 시작이었다. 우리는 기존 열품타 앱에서 2가지 문제를 발견했다.
첫번째는 공부 시간 측정을 위한 방식이 수동으로 스타트 버튼을 누르는 것인데, 이를 통한 공부시간 측정이 '신뢰성'이 있는가 하는 부분이다.
두번째는 기존 열품타라는 어플리케이션은 '오래 공부한 사람이 우수하다'라는 양적 평가방식을 채택하고 있다. 하지만 한 문제를 푸는데 1시간 걸리는 학생과 10시간이 걸리는 학생이 있다면 두 학생 중에 어떤 학생이 우수할까? 나느 전자라고 생각한다. 그래서 우리는 시간 활용을 질적으로 평가할 수 있는 방식을 제시했다.

핵심 기능 : 자동 타이머 기능

먼저 시간측정의 신뢰성을 위한 우리의 솔루션은 자동 타이머 기능이다. 공부시간을 자동으로 측정하기 위해서는 어떤 조건에서 START를 할 지, STOP을 할 지 조건을 정하는 것이 복잡했다.
우리는 자동 START를 위한 조건으로 1. 지정한 학습 사이트에 접근, 2. 웹캠에서 얼굴인식 을 사용한다. nginx를 사용하여 유저가 요청한 도메인 사이트가 학습사이트인지 아닌지를 판단하도록 한다. 이것이 통과되면 웹캠에 얼굴이 인식되면 자동으로 타이머가 시작된다.
START만큼 자동 STOP 기능도 어려웠다. 지정한 웹 사이트에서 벗어나는 걸 어떻게 판단할 지, 한 윈도우 창 내에서 탭을 옮기면 그것도 확인할 수 있을 지, 브라우저 외부의 화면 부분을 클릭하거나 키보드 타이핑이 없거나 하는 등의 인터럽트들을 어떻게 확인하고 활용할 수 있을 지 확인해야했다.

기술적 챌린지

타이머를 자동으로 켜고 끄는 기준은 생각하면 생각할 수록 복잡해지는 경향이 있어, START, END 조건을 어떻게 정할 지는 나에게 큰 기술적 챌린지라고 생각되었다. 그리고 tensorflow의 media pipe를 통해 얼굴인식을 하는 것, 많은 유저들이 얼굴인식을 통한 자동 타이머 기능을 쓸 때, 서버는 그 트래픽을 어떻게 관리할 지, 마지막으로 위젯을 제공하기 위해 웹품타 자체를 데스크탑 앱으로 기획했는데, 데스크탑 앱 환경에 적응하는 것도 기술적 챌린지가 될 것으로 예상했다.

치열했던 4일

  • 협업 : 서로를 이해하는 것
    같은 팀원이었던 혜원이는 정글과정에서 한 번도 같은 조를 하지 않았다. 이번에 처음 소통하면서 초반에는 서로 조심스러운 부분들이 많았다. 프로젝트를 기획하는 기간이 매우 짧았기 때문에 모든 절차를 다 지키면서 일을 할 수 없었다. 이 때 어디까지 지키고 어디까지 포기할 수 있는 지에 대한 기준이 서로 달랐다고 생각한다.
    예를 들어, 우리 조는 기획 단계에서 서로의 이해도를 맞추는 것이 필요하다고 생각해서 이해되지 않는 부분들은 바로바로 짚고 넘어가자고 동의를 했다. 하지만 시간이 촉박해지면서 내가 중요하지 않다고 생각해서 넘기고 싶은 문제를 혜원이가 중요한 문제라고 생각해서 확실히 하려고 하거나, 그 반대 상황도 있었을 때가 있었다.
    이를 해결하기 위해 우리는 '커밋'이라는 단어를 사용했다. 우리가 어느 정도까지 이해한 것이 서로 일치한다는 것을 확인하면서 "여기까지 커밋하자"라는 말을 하면서 서로의 이해의 정도를 확실히 했고, 그 이상의 의논이 지금 상황에서 필수적인가 또한 서로 이야기하면서 풀어나갔다.
  • 디자인 : 하루 만에 Figma를 배우다.
    1차 발표에서 시연까지 다루어야 했기 때문에 그런 시연의 느낌을 내기 위해 Figma를 사용했다. 전에 포토샵이나 일러스트레이션은 다루어 본 경험이 있어서 그 때와 단축키들이 거의 비슷해서 배우기 편했다. 그리고 Frame 내에 디자인하고 그것들을 prototype화해서 연결 관계를 나타낼 수 있다는 점에서 매우 편리한 앱이라고 생각했다.
    그리고 디자이너들이 이렇게 한 땀 한 땀 찍어내는 UI들을 함부로 변경하는 누를 끼치면 안되겠다는 생각을 했던 계기다.

결과

우리 팀 내에서 나온 두 아이디어는 각각 가장 잘 아는 사람이 발표해야한다고 생각했다. 그래서 웹품타 부분은 내가 직접 발표했다. 결과적으로 우리 팀은 두 아이디어 모두 괜찮다는 평가를 받았다. 하지만 개인적으로 웹품타 발표 준비가 미흡하여 전달력이 부족했던 점이 아쉽다. 그래도 우리가 생각했던 열품타의 문제점과 그 솔루션에 대해서 운영진분들께서 끄덕끄덕하시며 들어주시는 경험이 인상깊었다.
우리 팀은 또다른 프로젝트였던 '긱타임'으로 최종 프로젝트를 준비하는 것으로 결정했다. 긱타임 또한 기술적 챌린지가 많고 기획단계에서 생소하게 표현된 UI들의 UX를 향상시키는 작업이나 더 업그레이드 시켜보고 싶은 페이지들이 즐비했고, 알바 시급 경매 시스템이나 알바 면접 예약 시스템 등에서 다른 유저와 동시에 선택하여 일어날 수 있는 충돌문제 이슈들이 많아 이를 어떻게 해결할 지에 대해 고민한다면 많은 공부가 될 수 있을 거 같아 기대가 된다.

[웹품타 발표 시연 참고 영상] https://youtu.be/240dH8tgqEc
[긱타임 발표 시연 참고 영상] https://www.youtube.com/watch?v=vnxH6VvDr6o

2. 3일 1워드

2-1. plugin

2-2. nginx

2-3. socket I/O

2-4. webRTC

profile
두 발로 매일 정진하는 두발자, 강세훈입니다. 저는 '두 발'이라는 이 단어를 참 좋아합니다. 이 말이 주는 건강, 정직 그리고 성실의 느낌이 제가 주는 분위기가 되었으면 좋겠습니다.

0개의 댓글