← WORK 목록으로
KOREA위시켓디자인

AI 평가·첨삭 솔루션 대표 화면 UI 디자인 및 디자인 시스템 구축 전문가

콘텐츠 기반 AI 평가·첨삭 SaaS 솔루션의 대표 화면 UI 디자인과 재사용 가능한 디자인 시스템을 구축하는 프로젝트입니다. 교사용·학생용·리포트 영역의 PC·모바일 반응형 대표 화면 10~15개를 디자인하고, 디자인 토큰·컴포넌트 라이브러리·개발자용 디자인 가이드를 Figma로 산출하는 것이 핵심입니다. Figma의 컴포넌트·변수 기능으로 디자인 시스템을 설계해 본 경험이 있고 교육·평가 서비스 UI 실적이 있는 UI/UX 디자이너에게 적합합니다.

2026.10.14VIEW 3위시켓에서 수집
Budget2,250,000원
Difficulty중급
Duration약 3~4주
Work style외주
Required stack

필요 기술

FigmaDesign TokensDesign SystemResponsive DesignUI/UX
Project brief

프로젝트 내용

[프로젝트 개요]
- 콘텐츠 기반의 AI 평가·첨삭 솔루션 서비스의 화면 디자인을 의뢰합니다. 신규 서비스입니다.
- 서비스 전체 화면을 모두 디자인하는 것이 아니라, 영역별 대표 화면 10~15개를 먼저 디자인해 주시는 범위입니다. 저희가 이 대표 화면을 기준으로 나머지 화면은 내부에서 작업합니다.
- 따라서 단순히 이미지 파일을 전달받는 것이 아니라, 디자인 토큰과 컴포넌트가 분리되어 재사용 가능한 디자인 시스템 형태로 받는 것이 이 프로젝트의 핵심입니다.
- 대상 화면은 교사용 핵심 화면, 학생용 핵심 화면, 리포트 화면입니다.
- 반응형으로 진행합니다. PC와 모바일을 합쳐 10~15개 화면입니다.

[클라이언트 소개]
- 콘텐츠 기반 AI 평가·첨삭 솔루션을 새로 준비하고 있는 회사입니다.
- 프로젝트 의사결정 구조: 담당자가 요구사항 전달과 검수를 직접 담당합니다.
- 사내에 디자인 팀은 없습니다. 전달받은 대표 화면과 디자인 시스템을 기준으로 프론트엔드 인력이 나머지 화면을 작업합니다.
- 기존에 사용하던 디자인 가이드나 디자인 시스템은 없습니다. BI 규정은 보유하고 있으며 제공합니다.

[왜 이 프로젝트를 하는가]
- 지금 상황: 신규 서비스라 디자인 기준이 아직 없습니다. 기본 규격과 BI는 있으나 화면 디자인과 컴포넌트 체계가 없는 상태입니다.
- 끝나면 이렇게 되기를 바랍니다: 교사용·학생용·리포트의 대표 화면이 완성되고, 프론트엔드 인력이 그 디자인 시스템을 그대로 적용해 나머지 화면을 확장할 수 있는 상태입니다.
- 다만 이런 점이 우려됩니다: 퀄리티입니다. 대표 화면이 서비스 전체 디자인의 기준이 되므로, 완성도가 낮으면 이후 내부 작업 전체에 영향이 갑니다.

[필수 과업 범위와 결과물]
1. 수행 범위
- 대표 화면 UI 디자인: 교사용 핵심 화면, 학생용 핵심 화면, 리포트 화면
- 반응형 대응: PC와 모바일
- 디자인 시스템 구축: 디자인 토큰 정의, 컴포넌트 라이브러리 제작
- 디자인 가이드 작성: 프론트엔드 개발자가 적용할 수 있는 수준

2. 화면 분량
- PC와 모바일을 합쳐 10~15개 화면입니다.
- 정확한 화면 목록과 수는 착수 단계에서 함께 확정합니다. 저희가 기본 규격을 제공하므로 그 범위 안에서 결정됩니다.

3. 상세 과업
3-1. 대표 화면 비주얼 디자인
- 저희가 제공하는 기본 규격과 BI 규정을 반영한 화면 디자인
- 교사용·학생용·리포트 각 영역의 대표 화면
- PC와 모바일 반응형 대응

3-2. 디자인 토큰
- 색상, 타이포그래피, 간격, 라운드, 그림자 등 재사용 가능한 값으로 정의
- 명명 규칙 포함

3-3. 컴포넌트 라이브러리
- 버튼, 입력 필드, 목록, 카드, 탭, 모달, 알림 등 화면에 사용된 요소를 컴포넌트 단위로 분리
- 상태(기본·호버·비활성·오류 등)와 변형(크기·유형) 정의
- Figma의 컴포넌트와 변수 기능을 활용해 재사용 가능한 형태로 구성

3-4. 디자인 가이드
- 프론트엔드 개발자가 디자인을 코드로 옮길 때 참고할 수 있는 수준으로 작성
- 토큰과 컴포넌트의 사용 기준, 반응형 분기 기준 포함

4. 결과물
- Figma 원본 파일 (편집 권한 포함)
- 대표 화면 디자인 (PC·모바일)
- 디자인 토큰 정의
- 컴포넌트 라이브러리
- 디자인 가이드 문서

5. 범위에서 제외하는 것
- 대표 화면 외 나머지 화면의 디자인. 저희가 내부에서 작업합니다.
- 화면 설계(와이어프레임) 작성. 기본 규격을 저희가 제공합니다.
- 퍼블리싱과 프론트엔드 개발
- BI 기존 규정을 제공합니다.

[아직 정하지 않은 범위]
- 아래는 확정하지 못한 항목입니다. 의견을 적어 주세요.
1. 정확한 화면 목록과 수 — 10~15개 범위에서 착수 단계에 확정합니다. 교사용·학생용·리포트의 비중을 어떻게 나누는 것이 적절한지 의견 주시면 참고하겠습니다.
2. 반응형 분기 기준 — PC와 모바일 외 태블릿 대응이 필요한지, 분기 지점을 어떻게 잡는 것이 적절한지 의견 주세요.
3. 다크 모드 — 이번 범위에 포함할지 정하지 않았습니다. 포함 시 추가 범위와 비용을 별도로 적어 주세요.
4. 컴포넌트 범위 — 대표 화면에 쓰인 요소만 컴포넌트화할지, 이후 확장을 고려해 추가 컴포넌트까지 설계할지 의견 주세요.

[클라이언트 준비 사항]
- 제공하는 것: 화면 기본 규격, BI 규정
- 이 프로젝트 담당: 담당자 1명이 요구사항 전달과 검수를 담당합니다. 사내 디자인 팀은 없고 프론트엔드 인력이 후속 작업을 맡습니다.

[오픈 시점과 예산]
- 희망 착수일: 계약 체결 후 즉시
- 작업 기간: 제안해 주세요.
- 예산: 화면당 15만원 ~ 20만원 기준 (부가세 별도)
- 화면 10~15개 기준이며 디자인 토큰, 컴포넌트 라이브러리, 디자인 가이드 작성을 포함한 금액입니다.
- 위 금액은 최소 기준입니다. 더 높은 단가로 제안하실 경우 그 근거와 함께 금액을 적어 주셔도 됩니다.

[제안 포함 필수 사항]
- 지원 내용은 아래 기준으로 검토합니다.
1. 포트폴리오를 반드시 첨부해 주세요. 대표 화면이 서비스 전체 디자인의 기준이 되므로 완성도를 가장 중요하게 봅니다.
2. 디자인 시스템을 구축한 실적을 적어 주세요. 토큰 정의와 컴포넌트 라이브러리를 직접 설계한 사례, 그리고 그 디자인 시스템이 실제 개발에 적용된 사례가 있으면 포함해 주세요.
3. 교육·학습 서비스, 또는 평가·리포트 화면을 디자인한 경험이 있으면 적어 주세요.
4. 화면당 단가와 총 금액을 적어 주세요. 디자인 시스템 구축 비용을 화면 단가에 포함해 산정했는지, 별도로 산정했는지 구분해 적어 주세요.
5. 작업 기간과 착수 가능일을 적어 주세요.
6. 위 '아직 정하지 않은 범위' 각 항목에 대한 의견을 적어 주세요. 공고만으로 판단이 어려워 확인이 필요한 부분도 함께 적어 주세요.
지원 기회 분석

지원 전에 볼 것

핵심 요구사항

  • 교사용·학생용·리포트 대표 화면 10~15개 UI 디자인 (PC·모바일 반응형)
  • 디자인 토큰 정의 (색상·타이포·간격·라운드·그림자, 명명 규칙 포함)
  • 컴포넌트 라이브러리 제작 (상태·변형 정의, Figma 컴포넌트/변수 활용)
  • 프론트엔드 개발자가 적용 가능한 수준의 디자인 가이드 작성
  • 제공되는 기본 규격·BI 규정 반영
  • 미확정 항목(화면 비중, 반응형 분기, 다크모드, 컴포넌트 범위)에 대한 의견 제시

예상 산출물

  • Figma 원본 파일 (편집 권한 포함)
  • PC·모바일 대표 화면 디자인
  • 디자인 토큰 정의
  • 컴포넌트 라이브러리
  • 디자인 가이드 문서

매력 포인트

  • 명확하고 상세한 스펙 및 결과물 정의
  • 미확정 항목을 투명하게 공개하고 의견을 구함
  • 상향 단가 제안 허용

확인할 점

  • 기존 기술스택이 Android·iOS로 표기되어 디자인 프로젝트 성격과 불일치(공고 메타 오류 가능성)
  • 화면당 단가에 디자인 시스템 구축 비용까지 포함을 요구해 실질 단가가 낮아질 수 있음
Client signal

클라이언트 정보

회사 · 위시켓 / 지역 · 경기도 성남시 분당구 / 고용형태 · CONTRACTOR
START THE LOOP · CHOOSE

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.

한 번의 결과에 기대지 않고 다시 만들 수 있도록, 문제 발견부터 제작·배포·수익화까지 이어지는 전체 흐름을 익혀보세요.

TTJ CLASS에서 다음 구조 고르기 →
처리 중...