목차
- text2video 오픈 소스와 비디오 플레이어 선택
- AI 내장 문서 에디터 고민과 토큰 제한 문제
- Next.js 미들웨어 요청 IP 변경 이슈 질문
- React와 Blender 3D 애니메이션 연동 조언
- TailwindCSS와 디자인팀 색상, 협업 문제
- 스토리북(Storybook)과 디자인-개발 소통 관련 팁
- React 19 업데이트 주요 기능 소개
- UUID 버전 추천과 브라우저 호환성
- 개인 프로젝트로 차트 라이브러리 제작에 대한 의견
- 기타 소소한 개발자 일상 및 동기부여
1. text2video 오픈 소스와 비디오 플레이어 선택 🎥
- text2video 관련 도커 실행 실패, 성능 문제 겪음.
- 오픈 소스 프로젝트 예: biniou GitHub.
- 비디오 재생 라이브러리로 많이 사용하는 Video.js에 대해 소개.
- 과거 온라인 강의 플랫폼 개발 시 Video.js 사용 경험 있음.
- Vimeo 네이티브 플레이어로 변경한 이유:
- 보안 강화(다운로드 차단 등 관리 용이).
- Vimeo가 트래픽 감당과 용량 제공 측면에서 유리함.
- Vimeo가 업로드 API는 비싸지만 일반 재생용 API는 저렴함.
초보자 주의사항
- text2video 모델은 아직 개발과 최적화가 필요하며, 직접 배포 시 성능과 안정성 문제를 고려해야 함.
- 비디오 재생 시, 오픈소스 플레이어 vs 상용 플랫폼(Vimeo 등) 선택은 보안, 트래픽, 비용 측면에서 신중하게 결정할 필요가 있음.
2. AI 내장 문서 에디터 고민과 토큰 제한 문제 📝
- AI 기능 내장 문서 에디터로 Tiptap 고려 중.
- 직접 AI 내장 WYSIWYG 에디터 사용 경험은 거의 없음.
- 많은 AI 기능 내장 에디터들이 실제론 ChatGPT API 같은 외부 API 활용.
- ChatGPT 입력 토큰 제한으로 긴 문서 작업 시 제약이 있음 (예: 200자 제한 이상 텍스트는 잘림).
- 이를 극복하지 않으면 문서 에디터에 AI 기능 적용이 어려움.
참고 사항
- AI가 붙은 에디터 개발 시 API 호출 제한과 토큰 관리는 중요한 기술적 이슈.
- 자체 모델 운용 vs 외부 API 연동에서 비용과 성능 트레이드오프가 있음.
- Tiptap은 Vue/React 호환되는 오픈소스 에디터로 커스터마이징이 상대적으로 용이함.
3. Next.js 미들웨어 요청 IP 변경 문제 질문 🤔
- Next.js 미들웨어 사용 중 요청 IP가 바뀌는 원인 문의.
- 별다른 해결책이나 답변은 없었으나, 프록시 설정이나 클라우드 환경에서 IP 변경 문제 가능성 염두.
4. React와 Blender 3D 애니메이션 연동 조언 🎨
- React에서 Blender 3D 애니메이션 출력 문의.
- 추천 라이브러리:
- Three.js (웹 3D 렌더링 라이브러리)
- R3F (React용 Three.js 래퍼)
- react-stl-viewer (3D 모델 뷰어)
- Three.js 기반으로 3D 애니메이션 구현 경험자가 다수.
5. TailwindCSS와 디자인팀 색상, 협업 문제 🎨🤝
- 디자인팀이 정의한 색상과 실제 개발팀 Tailwind 색상 값이 다르다는 문제.
- 디자인팀이 Tailwind 기반 디자인은 잘 모르는 상황.
- 해결 방안:
- 디자인팀 색상 값을 Tailwind config에 반영.
- 또는 디자인팀이 Tailwind 색상을 참고하여 디자인 시안 구성.
- 하지만 디자인팀과 개발팀 간 조율과 소통이 가장 중요함.
- 실무에서는 보통 디자인시안에 맞게 개발팀이 Tailwind 설정을 맞춤.
- 개발자가 디자인팀 색상 무시하고 비슷한 값 쓰면 디자이너 의욕 저하 우려.
- 토큰명 통합과 공통 컴포넌트 활용으로 색상/디자인 일관성 유지 필요.
초보자용 내용
- TailwindCSS는 스타일 유틸리티 클래스 기반 프레임워크로, 색상 구성은 tailwind.config.js에서 수정 가능.
- 디자인 시스템과의 일관성 유지가 중요하며, 이를 위해선 개발자와 디자이너 간 지속적 소통 필수.
6. 스토리북(Storybook)과 디자인-개발 소통 관련 팁 📚
- 스토리북은 UI 컴포넌트 문서화와 테스트용으로 주로 사용됨.
- 디자인팀에서 별도로 스토리북을 확인해 업무에 반영하는 경우는 드묾.
- 스토리북이 소통의 주 도구가 아닌 결과물 확인이 최종적인 소통 수단.
- 문제는 공통 컴포넌트가 부족하거나 디자인 시스템이 제대로 지켜지지 않아 반복적인 수정과 불필요한 소통 증가.
- 스토리북이 제대로 관리되지 않으면 문서가 오래되고 신뢰도 하락.
- 공통 컴포넌트 재사용과 모듈화가 팀 간 협업 효율 향상에 핵심.
7. React 19 업데이트 주요 기능 소개 ⚛️
- React 19에서 추가된 주요 기능:
- useActionState
- useOptimistic 훅
- 새로운 action 개념 및 use API 도입
- 링크: https://velog.io/@skiende74/React-19-%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD-useActionState-useOptimistic-%EA%B3%BC-use
8. UUID 버전 추천과 브라우저 호환성 🔑
- UUID 생성 시 v4(UUID 랜덤 생성)와 v7(시간 기반 UUID) 사용 고민.
- 다수 개발자 기본적으로 v4 사용.
- 브라우저 기본 지원 API인 crypto.randomUUID() 추천 (라이브러리 불필요).
- 단, 사파리 15.4 미만에서는 폴리필 필요.
9. 개인 프로젝트로 차트 라이브러리 제작에 대한 의견 📊
- 개인 프로젝트로 차트 라이브러리 제작 고려 중.
- 이미 ECharts, Chart.js 같은 히트 라이브러리 존재.
- 차트 라이브러리 제작 경험은 개발 역량과 포트폴리오 강화에 도움.
- 다만, 라이브러리 커스터마이징 능력도 충분히 어필 요소.
- 회사 요구 역량과 본인 목표에 맞춰 프로젝트 방향 결정할 것 권장.
10. 기타 소소한 개발자 일상 및 동기부여 🌙
- 일찍 자고 일찍 일어나는 습관 추천.
- 하루를 건강하게 보내기 위한 간단한 동기부여(숨 쉬기 운동 등).
- 개발자 간 편안한 대화 분위기 조성.
면접팁⚡
- AI 내장 에디터 개발 시 토큰 제한 문제와 API 활용 방식을 명확히 설명할 수 있어야 함.
- 디자인팀과 협업 경험 및 Tailwind 설정 조율 사례 언급하기.
- React 19에서 추가된 새로운 훅과 개념에 대해 기본 이해 및 적용 경험 강조.
- 차트 라이브러리 제작 경험은 기술적 깊이와 취업 의지를 보여주는 좋은 포인트임.
- UUID 버전에 따른 브라우저 호환성 문제를 인지하고 대응할 줄 아는지 질문 받을 수 있음.
링크🔗
- text2video 오픈소스 biniou: https://github.com/Woolverine94/biniou?tab=readme-ov-file
- Video.js 공식 문서: https://docs.videojs.com/
- React 19 업데이트 내용:
https://velog.io/@skiende74/React-19-%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD-useActionState-useOptimistic-%EA%B3%BC-use
#text2video#비디오플레이어#AI에디터#TailwindCSS#디자인시스템#스토리북#React19#UUID#차트라이브러리#개발자소통