2013–2015 기술 기고

2년 10개월간, 전 회사에서 일했던 내용을 기술적인 부분을 중심으로 회고하고자 한다.

처음 기존의 구축된 frontend module을 refactoring하는 작업을 시작으로 태블릿 형태의 한국 시장을 타겟으로한 안드로이드 프로젝트를 구축하였고, 미국 서비스인 웹의 중심 페이지인 레슨-리뷰 페이지를 리뉴얼 하고, Polymer를 이용해 UserGuide와 Sandbox를 구축했고, 최근 프로젝트인 연산 프로젝트를 초기 구축했다.

처음 와서 작업한 기존의 모듈을 refactor하는 작업은 크게 기억나는 것이 없다. 팀장이 구축한대로, 각 모듈을 스타크래프트 유닛 이름으로 설계했던 내용이 인상적이었는데, 명시적으로 해당 모듈이 의미하는 바를 알지 못했고, 각 유닛 모듈의 dependency가 강해서 버그가 날 여지가 많은 냄새나는 코드였다.

한국 수학 어플리케이션의 경우, 안드로이드 태블릿 전용의 수학교육 어플리케이션을 리드 개발하는 업무를 담당하여 진행하였고, 중점적으로는 학생이 직접 문제를 푸는 문제 페이지를 개발하였다.

해당 페이지는 세 가지의 중심 구성 요소를 지니고 있다.

-문제를 렌더링 하는 WebView

-VisionObject를 이용하여 수식을 인식하는 Layout View

-연습장 용도를 위한 ScratchPad Layout View

먼저, 웹뷰에서는 웹서비스를 렌더링하는 하이브리드 앱을 개발하기 위해서, 초기에 웹과 앱의 세션을 동기화시키고 웹서비스로 접근하는 함수를 네이티브 자바스크립트로 호출하고 응답을 받는 방식으로 문제를 로드하고 풀고 답변하는 로직을 구성하였다. 각 문제에는 하위 서브 트리의 문제가 구성되어 각 문제를 선택하여 이동할 수 있다.

수식인식을 지원하는 Layout View의 경우, VisionObject의 MyScript SDK를 활용하여, 사용자가 스크래치한 수식을 인식하여, 그 인식한 오브젝트를 변경 시마다 웹뷰 단으로 넘겨서 연동되도록 하였고, undo와 redo, erase 등의 기능을 지원하며 스크래치로 해당 구역에 있는 숫자를 지우는 기능도 추가로 구현했다. 이 프로세스는 추후, 연산력 프로젝트에서 참조할 수 있었다.

마지막으로, 연습장 ScratchPad의 경우, 커스텀뷰의 일반 비트맵으로 구현된 버전과 Samsung SPen SDK를 이용하여 구현된 버전을 만들었고, 연습장을 닫거나 탭을 추가할 때마다 해당 연습장의 화면을 캡처하여 내부 메모리에 저장해 놓다가 다음 문제로 넘어갈 시점에, 서버로 그 이미지를 업로드 시키는 로직이 있다. 또한 해당 문제의 백그라운드 화면을 함께 확인하기 위해 뷰를 불투명하게 처리한 것이 특이점이다.

이 프로젝트는 한국으로 온 독일 중년 아저씨와 함께 개발하게 되었고, 첫 외국인과의 협업이라 낯설었지만, 이제는 꽤 괜찮은 동료로서 최근 프로젝트까지 함께 하게 되었다.

이 프로젝트에서 기억에 남는 트러블슈팅 경험이라 하면, 수학교육 안드로이드 프로젝트에서 Blackout 현상을 해결하기 위한 경험이 있다. 이 현상은 간헐적으로 화면이 점등 되는 현상인데, 화면이 아예 꺼지는 것이 아닌 불투명하게 검은 화면이 덧씌어진 듯한 현상이 보여서, 문제를 쉽게 파악하기 힘든 부분이었다. 처음에는 메모리 관리의 문제로 추측하여 프로파일링을 통해 memory leak을 체크해봤지만 별다른 특이점을 발견하기 어려웠는데, 현상이 일어날 시점에 로그를 분석해본 결과 모든 프로세스를 다 죽였고 어플리케이션 또한 강제적으로 종료시키는 것을 확인했다. 이 문제를 삼성 개발팀과 미팅을 통해 함께 살펴보았고, 여러 케이스의 로그를 분석해보았는데 블랙아웃 현상이 일어날때 ANR이 일어나고, 이 쓰레드를 분석해보면, Webview core 쓰레드가 무한정 돌고 있는 것이었다. 이 쓰레드가 돌기 위해선, 웹 뷰안의 캔버스를 그리거나 텍스트필드에 입력이 가해지는등 해당 이벤트가 일어날때만 점유를 했다가 사라지는 패턴인데, 이 현상이 일어난 직후에 이 쓰레드가 다시 줄어들지 않고 계속 돌고있다는 점이 특이할 만한 점이었다. 사실, 서비스의 특성상 웹뷰의 캔버스를 가지고 수학 컨텐츠를 개발하는 시스템팀과 독립적으로 개발을 해왔고, 웹뷰의 메모리나 쓰레드 점유를 파악하지 못했던 것인데 이를 계기로 함께 문제를 논의했다. 기본적으로 서너개의 기능을 분리하여 앱을 빌드 패키징하여 테스팅을 수행했고, 웹뷰가 탑재되지 않은 경우에 현상의 빈도가 줄어들었지만 여전히 발생을 하는 것을 보고 삼성측에서 이에 대한 하드웨어 문제를 파악하여 최종적으로 패치를 해주어 해결하게 되었다.

미국 웹서비스는 기존에 구축한 레슨과 리뷰 문제 페이지를 새로운 디자인과 UX에 맞게 리뉴얼하는 작업을 담당했는데, 기존의 코드를 모두 걷어내고 새로운 모듈로 작업하되 기본 프로세스는 기존과 비슷한 형태로 작업했다. 하지만, 각 클래스들이 모듈화되지 않고, 각 변동사항이 다른 클래스에 영향을 주는 오염이 심해지면서, Polymer라는 웹 모듈에 최적화된 프레임워크에 관심을 가지게 되었다. 이를 시험삼아 적용해본 UserGuide와 Sandbox에 적용하면서, 충분히 현업에 사용할만한 기술이라 보았다. 추후에, 이와 기존의 아키텍쳐와 충돌 같은 이슈가 일어났다고 하는데 이는 기존의 아키텍쳐에 무작정 통합하고자 하는 아집일뿐, 해당 UserGuide는 추후, 아이패드와 같은 태블릿 모바일 웹에서도 수정없이 이용할 수 있었다.

이후에, 웹페이지의 데이터 분석을 위한 여러 데이터 모듈을 살펴보고 유용한 툴을 제안했다. 특히, 그 중에서 intercom이라는 user analytics와 supporting을 주 특징으로 제공하고, signIn을 한 이후 유저 세션을 추적해서 맞춤 feedback을 제공하는 툴을 이용했다. 기존 google analytics 도 세션 추적은 가능 하지만, 이와 같이 개별user에 포커스를 맞추지 않기에 B2B와 같은 엔터프라이즈 서비스를 이용하는 각 유저의 액티비티와 피드백을 확인할 수 있는 툴로는 유용했다.

최근의 연산력 프로젝트의 경우, 안드로이드 기반 어플리케이션으로 RxJava와 여타의 유용한 라이브러리들 (butterknife, Bus, timber, retrofit등)을 이용하여 구축했는데, 이는 다양한 UI 이벤트를 하나로 통합하여 관리하기 위함이었고 불필요한 작업량도 줄일 수 있었다. 기존의 구축된 myscript와 연계된 프로세스를 수정하여, 유저의 필기에 따라 유연하게 숫자로 변환되는 프로세스를 만들었고, 특정 제스처나 지우개로 실제로 지우는 듯한 사용자 경험을 제공할 수 있도록 설계하였다. 연산력이 진행되는 부분의 모듈을 분해하여 각 스텝이 진행되는 형태로 첫번째 프로토타입을 만들어 UX팀이 유저테스트를 진행하였는데, 이 기능이 코어한 부분은 아니라고 UX팀이 판단하여, 두번째 프로토타입은 이를 제외하고 몇가지 애니메이션과 사용성에 집중한 프로덕트로 방향을 잡았다. 나는 실제 필기를 하는 듯한 사용성을 향상시키기 위한 모듈에 집중하고 함께 개발한 개발자 마리안은 그밖의 애니메이션과 비주얼적인 부분에 집중하여 이 곳의 마지막 프로덕트를 마무리 짓게 되었다.

명시적으로 이 회사를 명칭하지 않았지만, 이 회사의 문화적인 부분과 협업 방식, 여타의 애로 사항들에 대해 관심이 있다면, 개인적으로 컨택해도 좋다.

마리안이 보낸 새해 편지~

Hello Will,

the new year was really calm… no sparkling wine, only water and juice in an restaurant and watching Transformers in the TV after midnight. I miss German styled silvester party… in an huge music club with buffet, nice dancing girls and music and firework at 12:00 and Berliner donuts with plumjam inside…

Greetings

Marian