프로젝트 주제를 두고 고민하던 중, 거창한 목표를 세우기보다 "우선 내 주변에서 아이디어를 찾아보자"는 생각으로 시작했다. 그렇게 "내가 필요한 걸 직접 만든다"는 단순하지만 확실한 동기가 TiTaS 프로젝트의 출발점이 되었다. 이 프로젝트는 단순한 기능 구현을 넘어 나를 엔지니어로 한 단계 성장시켰다. 기술적으로는 React의 상태 관리 구조를 심층적으로 분석하고, 다양한 브라우저 API를 서비스 환경에 맞게 최적화하는 경험을 쌓았다. 또한, 개발자 관점을 넘어 사용자를 배려하는 UX/UI 설계의 중요성을 몸소 체감했다. 무엇보다 가장 큰 수확은 태도의 변화다. 기술적 제약 앞에서 '안 되는 이유'를 찾기보다, 어떻게든 '되게 하는 방법'을 찾아내는 집요한 엔지니어링 마인드셋을 갖추게 되었다. TiTa..

기능 구현과 버그 수정이라는 긴 터널을 지나고 나니, 문득 화면이 눈에 들어왔다. 기능은 완벽하게 돌아가는데, 어딘가 투박하고 정돈되지 않은 느낌. 마치 골조만 올라간 건물 같았다.사용자가 서비스를 처음 마주했을 때 "써보고 싶다"는 느낌을 받으려면, 탄탄한 코딩만큼이나 직관적인 디자인과 명확한 정체성이 필요하다. 이번 글은 TiTaS가 '돌아가는 코드 덩어리'에서 하나의 '그럴듯한 제품'으로 변모하는 과정에 대한 기록이다. 1. 얼굴 짓기: TiTaS로고Tiki-Taka Script이기에 상대방과 대화하는 느낌이 먼저 떠올랐다. 이름(TiTaS) 속에 알파벳 'T'가 두 번 들어간다는 점에 착안하여, 두 개의 'T'가 서로 마주 보고 대화하는 모습을 형상화했다. 2. UI 변천사: 사용성을 찾아가는 여..

기능 구현과 배포를 마친후 이제는 사용성에 대해서 눈에 들어오기 시작했다. 잠깐 떴다 사라지는 토스트 메시지는 talkpage에서 결과를 확인하기에는 너무 가벼웠고, 기계적인 TTS 목소리는 몰입을 방해했다. 또한 URL을 보낼때 사진과 설명이 없는 주소는 너무 휑하게 느껴졌다. 2%의 아쉬움을 채우기 위해 UX와 디테일 기능을 추가했다. UX 개선: 토스트(Toast)는 결과창으로 적합하지 않다처음에는 연습이 끝났을 때 점수와 결과를 react-hot-toast로 가볍게 보여주었다. 하지만 토스트는 몇 초 뒤 스르륵 사라져 버린다는 치명적인 단점이 있었다. 사용자는 힘든 연습을 마친 후 자신의 성취(정확도, 소요 시간)를 진득하게 확인하고 싶어 한다. 사라지는 메시지는 이런 성취감을 반감시켰다. 연습 ..

핵심 엔진인 STT, TTS, Diff 구현과 그 외 기능을 구현 후 프로젝트가 다 끝난 줄 알았다. 하지만 그것은 착각이었다.막상 직접 사용해보니 브라우저 기본 경고창은 투박했고, 삭제한 데이터는 새로고침하면 다시 살아났다.페이지마다 여백은 제각각이라 시각적으로 불안정했다. 기능적으로는 작동하지만 사용하기에는 불편한, 미완성의 상태였다. 부족한 디테일을 잡기 위해 코드와 씨름했던 시간이었다.1. 토스트 라이브러리 도입과 Stale Closure 문제처음에는 사용자 피드백을 브라우저 기본 기능인 alert으로 처리했다. 하지만 삭제, 저장, 역할 전환 등 인터랙션이 많아질수록 매번 팝업을 띄우는 방식은 사용자 경험을 해쳤다. 그래서 react-hot-toast 라이브러리를 도입해 더 부드러운 피드백을 주..

프로젝트 초기, 나를 괴롭혔던건 다름아닌 CSS 프레임워크 설정이었다. 2025년 현재 최신 버전인 Tailwind CSS v4를 호기롭게 도전했지만, 설정과정은 순탄하지 않았다. 처음엔 당연히 v4를 선택했다. tailwind.confimg.js파일이 사라지고 CSS 파일 하나로 설정이 가능하다는 점이 굉장히 매력적이었다. 첫번째 벽: @theme 문법 에러@theme { --font-family-sans: 'Inter', system-ui, sans-serif; --color-primary: #8b7355;} 개발 서버를 돌렸더니 바로 터졌다. [postcss] Unknown word --font-family-sans 알고 보니 @theme 블록은 Tailwind v4 표준 문법이 아니었다. P..

앞서 과정에서는 TiTas의 첫 번째 엔진 데이터를 가공해 스마트 파서를 하는 것까지 했었다. 이제 핵심기능 TTS, Diff, TSS를 달아서 티카티카가 되게 구현하는 것이 목표이다! TTS란? 글자를 소리로 읽어주는 기술Diff란? 두 데이터/문서/코드 차이점을 찾아 비교해주는 것SST란? 음성을 문자로 바꾸는 기술 1. 구조적 난관: 파일은 만들었지만, '뇌'가 없었다. (Zustand 도입)TalkPage.tsx, CreatorPage.tsx 등 핵심 페이지 파일들을 생성하고 UI를 그리기 시작했다. 하지만 곧바로 막막함이 밀려왔다. "사용자가 Creator 페이지에서 만든 스크립트를 Talk 페이지로 어떻게 넘기지?" "연습이 끝나면 점수와 로그를 어디에 저장했다가 대시보드에서 보여주지?" 단순..

왜 TiTas인가?! AI로 할 수 없는 빈틈을 노려보자!드디어 우테코 마지막 미션 주차이다. 시간이 빠르게 지나갔다. 이번 과정은 자바스크립트에 대해 스스로 부족한 점이 많다는 것을 다시금 느끼는 시간이었다. 마지막 미션은 오픈 미션이라, 말 그대로 모든 것이 나에게 달려있었다.나는 혼자서 직접 프로젝트를 만들어보고 싶어 따로 협업을 하지 않았다. 혼자 하려면 고난도 미션이나 안 써본 언어를 선택해야 할 수도 있었다. 하지만 나는 리액트나 타입스크립트 역시 완벽하지 않고 여전히 부족하다고 느낀다. 그래서 기본 언어는 자바스크립트를 사용하되, 리액트와 타입스크립트를 활용해 보기로 했다. 여러 아이디어가 떠올랐지만 마땅히 제출할 만한 것은 없었다. 그렇게 아이디어 구상에만 4~5일을 썼다.최근 개인적으로 ..

우아한테크코스 프리코스 3주 차 미션은 '로또 게임' 만들기였다. 처음에는 "그냥 로또 번호 뽑고 당첨인지 확인하면 되는 거 아냐?"라고 쉽게 생각했다. 코딩을 잘 못하는 내가, 어떻게든 이 미션을 완주하려고 발버둥 친 과정을 여기에 남긴다.1. TDD? 테스트부터 짜기TDD(테스트 주도 개발)를 만들었다. 보통은 코드를 다 짜고 나서 "잘 되나?" 하고 실행해보는데, TDD는 반대란다. "실패하는 테스트를 먼저 만들고, 그걸 통과시키는 코드를 나중에 짜라"는 것이다.처음엔 이게 왜 필요한지 이해가 안 갔다. "아니, 없는 기능의 테스트를 어떻게 만들어?" 그런데 막상 해보니 '시험 문제'를 먼저 보고 '답안지'를 작성하는 기분이었다. 내가 뭘 만들어야 할지 목표가 엄청 뚜렷해졌다.가장 어려웠던 '등수 ..

프리코스 2주차 시작하기! 이번에도 역시 fork하고 clone한다. 가장 중요한 브랜치도 만들어준다.지난 주에 한번 했다고 익숙해진다ㅎㅎ! 파일명을 wooteco에서 woowaco로 변경했다. 우아한테크코스이기 때문이다. 이제 2주차 과제의 어떤 기능들이 필요한지 생각해보겠다. # 구현할 기능 목록 ---### 1. 입력 및 준비- [ ] 경주할 자동차 이름을 입력받는다.- [ ] 입력받은 이름을 쉼표(`,`)를 기준으로 분리한다.- [ ] 분리된 각 이름이 5자 이하인지 검증한다.- [ ] 시도할 횟수를 입력받는다.- [ ] 각 자동차의 이름과 출력을 위한 전진 상태를 관리할 준비를 한다.---### 2. 경주 실행- [ ] 입력받은 횟수만큼 다음 과정을 반복한다: - [ ] 각 자동차마다 0에서..