🔗 형용할 수 없는 감정에 대하여
2022년 12월에 썼던 졸작 후기에 일부 내용을 추가한 글입니다.

기획

2021년에 휴학을 하고, 줄곧 하고 싶던 웹 공부를 하며 디자이너보단 개발자가 되고 싶다고 느꼈다. 하지만 마땅히 내세울 만한 포트폴리오가 없었기 때문에, 꼭 졸업 프로젝트로 하나의 웹 사이트를 처음부터 끝까지 제작해보자고 마음먹었다. 졸업 작품을 시작하는 모두가 그랬겠지만, 잘 해낼 수 있을거라는 생각이 없었다. 1학기 종강까지도.

감정 추출 아이디어

나는 줄곧 언어로 표현할 수 없는 감정이 있다고 느껴왔다. 복합적인 감정을 시각적으로 표현하고, 웹을 통해 많은 사람들과 공유할 수 있도록 기획하였다.

‘어떻게 감정을 쉽고 편리하게 얻을 수 있을까?’에 대한 고민을 많이 했다. 표현할 수 없는 감정을 표현해야 한다. 하지만 머신 러닝을 통해 문자에서 드러난 감정을 분석하는 텍스트 마이닝 같은 직접적인 방법은 하고 싶지 않았다. 간단하게 드로잉을 하거나 감정에 대한 설문을 진행하는 등 여러가지 인풋 방법을 고안했다. 그러던 와중에, 아르바이트하던 회사 사장님에게 문자로 감사한 마음을 더 잘 표현하기 위해 이모지를 고르는 순간에 아이디어가 떠올랐다.

이모지의 조합을 통하여 복합적인 감정을 표현하는 인풋 방식이다.

이모지 관련 자료를 리서치하며 각각의 이모지가 어떤 감정을 나타내는지, 얼마만큼의 활성도를 띄고 있는지 점수를 부여해 주었다. 사용자로부터 최대 10개 이내의 이모지의 조합을 입력받아 어떤 감정이 드러나는지 도출되도록 하였다.

8가지 대표 감정은 로버트 플루칙의 '감정의 바퀴'를 참조했다.

프로토타입

현재는 잘 구현 되었지만 당시에는 혼자 웹을 개발할 자신이 없었다. 끙끙대며 괴로워하고 있을 바엔 1차 졸업심사를 위해 기획이라도 넘겨보자! 라는 생각으로 프로토타입을 작업했다. 예전에 사둔 강의를 수강하면서 Three.js에서 3D 오브젝트가 어떻게 이루어지는지 기초를 익혔다. 내가 만들고 싶은 것은 추상적인 3차원 객체였기 때문에 열심히 레퍼런스를 찾으며 어떻게 구현되는지 리서치했다. 그럴듯한 시각화 알고리즘을 설계하고, 여러가지 강의를 참고하며 프로토타입 사이트를 만들었다.

1차 졸업 심사에 간신히 만든 프로토타입 사이트 ⤵️

개발

웹에서 3D를 구현하는 부분도, 데이터베이스 부분도 자신이 없었기에 여름방학이 되자마자 구현을 위한 개발 공부를 시작했다.

백엔드 고민

1학기 종강 직전에 세진이가 파이어베이스라는 호스팅 서비스를 추천해준 적 있는데, 찾아보니 프론트엔드 개발자가 정말 쉽게 백엔드를 사용할 수 있게 만든 어플리케이션이라고 하여 바로 해당 서비스를 도입시켰다.

리액트vs뷰

프론트엔드 개발자로 취업하고 싶은 만큼, 리액트나 뷰같은 프론트엔드 프레임워크도 써보고 싶었다. 리액트랑 뷰 중에 어떤 게 좋을까 하다가 더 쉽다고 하는 뷰를 선택했다! 사이트 규모도 작았으므로 뷰가 더 효율적이었다. 유튜브 강의를 참고하여 파이어베이스+뷰 기본세팅을 완료했다. 초반에 뷰에서 3D 지오메트리를 다룰 수 있는 Trois.js라는 라이브러리를 사용했지만, 한계를 깨닫고 Three.js로 돌아왔다. 2학기에 들어서도 시각화 파트가 많이 변경되었다.

WebGL?

3D 객체의 버텍스를 움직여 모션을 구현하는 과정에서, WebGL 코드를 처음 접하게 되었다. VScode에서 하이라이팅도 안되어서 상당히 애먹었지만, 코드 하나하나 건드려보면서 어떻게 동작하는지 파악했다. 현재 WebGL 기초의 작은 기반이 되었다.

자연물을 모티브한 아이디어도 있었다 (WebGL로 구현한 것) ⤵️

좌측부터 불, 얼음, 꽃을 모티브로 하였다.

졸업 전시

전시 공간 관련해서는 크게 시간이 걸리지 않았지만, DP를 간단하게 구성한 것에 대해 약간의 아쉬움도 있다. 웹 사이트를 호스팅 해두었지만 더 빠르게 실행하기 위해 깃허브를 통해 파일을 다운로드 받고 로컬로 실행했다. 아이맥으로 보니 웹 사이트 요소가 상대적으로 많이 작아져서 CSS로 다시 작업했다.

이슈

졸업 전시 첫날, 사용자가 늘어날수록 차츰 웹 브라우저의 퍼포먼스가 느려지는 문제가 있었다. 체험자분들이 긴 시간 사이트 로딩을 기다려야 하는 불편함이 있었기 때문에, 귀가 후 바로 해당 문제의 근원을 조사하였다. 페이지 이동 부분을 뷰 문법이 아닌 순수 자바스크립트 문법으로 작성하여 문제를 해결했고, 다음날부터는 원활하게 사용자 체험을 진행할 수 있었다.

오프라인 졸업전시 체험자 수

2022.12.15(목) : 35명
2022.12.16(금) : 88명
2022.12.17(토) : 104명
2022.12.18(일) : 127명
2022.12.19(월) : 86명

: 총 440명 (현재는 약 600명)

Keep (프로젝트에서 만족했고, 앞으로도 지속하고 싶은 부분)

• 새로운 것에 대한 도전
  내가 하고 싶었던 것에 도전한 것을 칭찬해주고 싶다. 기존에 할 수 있었던 것은 html과 css, 간단한 자바스크립트 였기 때문에, Vue를 사용해 보거나 백엔드(데이터) 부분을 다루는 등 모두 새로운 것이었다.

• 즐거운 작업
  살면서 진행했던 프로젝트 중에 가장 즐겁게 작업했다. 원하는 것을 구현하기 위해 배우는 보람이 컸기 때문에 꾸준히 작업하며 잘 마무리할 수 있었던 것 같다.
  

Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)

• 좋지 않은 인터넷 상태
  데이터베이스에 연결되기 위해 인터넷이 꼭 필요하다. 인터넷이 연결되지 않거나 느리면 등록 버튼을 눌러도 메인화면으로 넘어가지 않는 버그가 생긴다. 그러면 사용자들이 버튼을 여러번 누르게 되고, 누른 횟수만큼 중복 데이터가 쌓이는 문제점이 있었다.
  

• 아쉬운 전시 DP
  온라인 전시에도 빛을 볼 수 있는 작품이니, 오프라인 전시에서 조금 힘을 뺐다. 벽에 빔 프로젝터를 쏠까 시트지로 할까 고민했는데, 우주 공간 같은 메인 화면이 조금씩 움직이는 걸 보여주고 싶어서 빔 프로젝터로 선택했다. 빔프로젝터도 생각보다 성능이 좋지 않았다. 빔을 쏘기 위해 공간을 2m로 늘렸는데… 그 사이 공간이 너무 텅 비어 보인다 싶어서 전시 날인 목요일에 검은 천막을 달아서 어둡게 꾸몄다.

• 이모지의 한계
  안드로이드나 윈도우 환경에서 확인했을 때 보이지 않는 이모지 10개 정도를 제외했다. 그 때문에 자주 사용하는 이모지가 없다는 사용자분들이 계셨다. 이모지를 직접 제작해보고 싶다고 생각했는데… 실력이 좋았다면 시도했을 것 이다.

• 저품질 코드
  기능 구현에 앞서다 보니 코드를 깨끗하게 정리하지 못했다. 중복코드가 많거나 컴포넌트화가 제대로 이루어지지 않았다. 가독성과 유지보수, 재사용성을 위해 코드의 품질을 향상시킬 필요가 있다.
  

Try (Problem에 대한 해결 방식으로 다음 프로젝트에서 시도해볼 점)

• 클린 코드를 위해
  깨끗한 코드를 짜는 능력이 부족하다고 느꼈다. 코딩 문법을 더 공부하면서 더 나은 코드를 짜거나, 이 프로젝트를 리팩토링 하고 싶다. 또, 개발에 들어가기 전 로직을 완전히 설계한 후 진행하면 더 깔끔하게 코딩을 할 수 있을 거라 생각한다.

• 다른 사람과의 협업
  처음부터 끝까지 혼자 작업하며 편한 부분도 있었지만, 이제 다른 사람과 협업하며 더 멋진 프로젝트를 진행해보고 싶다.

그 후

추후 HCI학회의 크리에이티브 어워드 부문으로 선정되어 체험 전시를 진행하였고, CA BOOKS 267호 졸업전시 파트에 실리게 되었다.

친구로부터, 말로 표현을 잘 못해서 이런 프로젝트를 기획했냐는 말을 장난조로 들었다. 맞을지도 모른다. 올해 좋은 사람들을 가득 만나 사람을 대하는 마음가짐이 많이 바뀌었다. 주변 사람들에게 항상 감사한 마음을 가지고 솔직하게 표현해 가면서 살아갈 것이다.