포지션 상세
한국기술마켓은 대학과 공공연구기관의 연구성과가 실제로 쓰이도록 잇는 회사입니다. 2021년 4월에 시작해, 지금은 연구성과관리 시스템 한국기술HUB와 기술 전문 인터넷신문 한국기술뉴스를 함께 운영하고 있습니다. AI 관련 특허 13건을 보유하고 있고, 과학기술정보통신부 장관 표창을 받았습니다.
한국기술HUB는 기관이 가진 기술·특허·연구자·사업 정보를 관리하고, 기관별 연구성과 홍보 사이트를 구축·운영할 수 있게 돕는 시스템입니다. 현재 20여개의 대학 및 공공연구기관이 한국기술HUB 사이트를 활용하여 플랫폼을 운영하고 있습니다.
기술 스택
Next.js 16 · React 19 (App Router) · TypeScript FSD(Feature-Sliced Design) · 모노레포(pnpm workspace) shadcn/ui 기반 자체 디자인 시스템 (디자인 토큰 CSS · 다크모드) Zustand · TanStack Query v5 · React Hook Form + zod · NextAuth v5 Orval (OpenAPI contract-first, MSW mock)
• TypeScript · TanStack Query · shadcn/ui 기반 자체 디자인 시스템 등 저희 팀의 기술 스택과 FSD 레이어 구조, 코드 컨벤션에 맞춰 프론트엔드 개발 진행
세부 업무범위
1. 공통 컴포넌트 & 로직 개발
• 디자인 시스템(토큰 · 다크모드 · 다국어) 기반 컴포넌트 구현
• 20여 개 기관 사이트가 공유하는 공통 컴포넌트·도메인 모델 관리 — 한 기관에서 만든 것을 공통 패키지로 올릴지, 그 기관에 남길지 판단하고 실행
• 반복되는 로직 및 유틸 함수 관리 (FSD 레이어 경계에 맞춘 배치)
2. 페이지 개발
• 기관 공개 사이트 UI·기능 구현 — 기술·특허 상세, 검색·필터, 연구자·연구성과 목록, 기술이전 문의·신청 폼, 마이페이지
• 기관 담당자용 운영 시스템 UI·기능 구현 — 성과·기술 등록·편집, 목록·상세, 통계 대시보드, 권한별 화면
• 디자인 반영 및 반응형 · 다크모드 · 4개 국어 대응
• Orval로 생성한 OpenAPI 클라이언트 기반 API 연동 및 데이터 처리 (MSW mock 포함)
• Cypress 등을 활용한 E2E 테스트 및 레이아웃 측정 스크립트 작성
3. PR 확인 및 코드 품질 관리
• 팀 내 코드 컨벤션 · FSD 레이어 규칙 · 디자인 시스템 준수 여부 확인 (DS 준수 린터 운영 포함)
• 디자인 산출물과 구현 화면을 대조해 불일치(빠진 필드, 치환된 컴포넌트, 어긋난 색·간격)를 찾고 원인을 판정·처리
코드 리뷰 및 개선 사항 문서화
4. 문서화 및 자동화
• 기능별 공통 로직, 코드 컨벤션, 화면 필드-API 매핑 문서 업데이트
• 개발 가이드 · README 최신화 및 공유
• 반복되는 판단을 린트 룰 · 코드 생성기 · Claude Code 스킬로 만들어 팀에 배포
• Server Components / 클라이언트 경계를 스스로 판단할 수 있는 분
• 모노레포 경험 — pnpm/yarn workspace + Turborepo/Nx 환경에서 패키지 경계와 공개 API(배럴)를 설계하거나 운영해 보신 분
• CSS 기본기 — 변수·캐스케이드·스코프·반응형을 유틸리티 프레임워크 없이 다룰 수 있는 분
• 남이 쓴 코드를 잘 분석하고 꼼꼼하게 읽는 능력
• AI 에이전트 도구(Claude Code 등) 일상 사용 경험 — 원하는 결과가 나오도록 요청을 설계하고, 나온 산출물을 꼼꼼히 검토·검증할 수 있는 능력
한국기술HUB는 기관이 가진 기술·특허·연구자·사업 정보를 관리하고, 기관별 연구성과 홍보 사이트를 구축·운영할 수 있게 돕는 시스템입니다. 현재 20여개의 대학 및 공공연구기관이 한국기술HUB 사이트를 활용하여 플랫폼을 운영하고 있습니다.
기술 스택
Next.js 16 · React 19 (App Router) · TypeScript FSD(Feature-Sliced Design) · 모노레포(pnpm workspace) shadcn/ui 기반 자체 디자인 시스템 (디자인 토큰 CSS · 다크모드) Zustand · TanStack Query v5 · React Hook Form + zod · NextAuth v5 Orval (OpenAPI contract-first, MSW mock)
주요업무
• React 및 Next.js를 이용한 연구성과관리 플랫폼 웹 애플리케이션 개발• TypeScript · TanStack Query · shadcn/ui 기반 자체 디자인 시스템 등 저희 팀의 기술 스택과 FSD 레이어 구조, 코드 컨벤션에 맞춰 프론트엔드 개발 진행
세부 업무범위
1. 공통 컴포넌트 & 로직 개발
• 디자인 시스템(토큰 · 다크모드 · 다국어) 기반 컴포넌트 구현
• 20여 개 기관 사이트가 공유하는 공통 컴포넌트·도메인 모델 관리 — 한 기관에서 만든 것을 공통 패키지로 올릴지, 그 기관에 남길지 판단하고 실행
• 반복되는 로직 및 유틸 함수 관리 (FSD 레이어 경계에 맞춘 배치)
2. 페이지 개발
• 기관 공개 사이트 UI·기능 구현 — 기술·특허 상세, 검색·필터, 연구자·연구성과 목록, 기술이전 문의·신청 폼, 마이페이지
• 기관 담당자용 운영 시스템 UI·기능 구현 — 성과·기술 등록·편집, 목록·상세, 통계 대시보드, 권한별 화면
• 디자인 반영 및 반응형 · 다크모드 · 4개 국어 대응
• Orval로 생성한 OpenAPI 클라이언트 기반 API 연동 및 데이터 처리 (MSW mock 포함)
• Cypress 등을 활용한 E2E 테스트 및 레이아웃 측정 스크립트 작성
3. PR 확인 및 코드 품질 관리
• 팀 내 코드 컨벤션 · FSD 레이어 규칙 · 디자인 시스템 준수 여부 확인 (DS 준수 린터 운영 포함)
• 디자인 산출물과 구현 화면을 대조해 불일치(빠진 필드, 치환된 컴포넌트, 어긋난 색·간격)를 찾고 원인을 판정·처리
코드 리뷰 및 개선 사항 문서화
4. 문서화 및 자동화
• 기능별 공통 로직, 코드 컨벤션, 화면 필드-API 매핑 문서 업데이트
• 개발 가이드 · README 최신화 및 공유
• 반복되는 판단을 린트 룰 · 코드 생성기 · Claude Code 스킬로 만들어 팀에 배포
자격요건
• React · Next.js App Router 실무 경험 및 TypeScript 능숙• Server Components / 클라이언트 경계를 스스로 판단할 수 있는 분
• 모노레포 경험 — pnpm/yarn workspace + Turborepo/Nx 환경에서 패키지 경계와 공개 API(배럴)를 설계하거나 운영해 보신 분
• CSS 기본기 — 변수·캐스케이드·스코프·반응형을 유틸리티 프레임워크 없이 다룰 수 있는 분
• 남이 쓴 코드를 잘 분석하고 꼼꼼하게 읽는 능력
• AI 에이전트 도구(Claude Code 등) 일상 사용 경험 — 원하는 결과가 나오도록 요청을 설계하고, 나온 산출물을 꼼꼼히 검토·검증할 수 있는 능력
