자주 묻는 질문

Compit(컴핏)은 프론트엔드 개발 실력을 실전처럼 키울 수 있는 코딩 챌린지 플랫폼입니다. 주어진 타겟 디자인을 보고 직접 코드를 작성하여 동일하게 구현한 뒤, AI가 자동으로 채점하여 점수와 피드백을 제공합니다. HTML, CSS, JavaScript는 물론 React, Vue, TypeScript까지 다양한 프레임워크를 지원하며, 단순히 이론을 배우는 것이 아니라 실제로 코드를 작성하며 감각을 키울 수 있도록 설계되었습니다. 초보자부터 실무 경력자까지 모두 활용할 수 있는 단계별 난이도 시스템을 갖추고 있습니다.

프론트엔드 개발에 관심이 있는 모든 분을 대상으로 합니다. 코딩을 처음 시작하는 입문자에게는 HTML, CSS 기초 챌린지가 준비되어 있고, 주니어 개발자에게는 실무에서 자주 만나는 레이아웃과 컴포넌트를 직접 구현해볼 수 있는 중급 챌린지가 마련되어 있습니다. React나 Vue 같은 프레임워크를 새로 배우고 싶은 분들에게도 좋은 연습 환경이 되며, 디자인을 코드로 변환하는 능력을 키우고 싶은 퍼블리셔나 디자이너에게도 유용합니다.

Compit의 핵심 기능인 챌린지 풀이, 코드 에디터, 실시간 프리뷰는 모두 무료로 이용할 수 있습니다. AI 채점 기능도 기본 횟수 내에서 무료로 제공되며, 학습 가이드와 보안 교육 콘텐츠 역시 추가 비용 없이 열람할 수 있습니다. 향후 프리미엄 기능이 추가될 수 있으나, 기본적인 학습과 챌린지 참여에는 별도의 비용이 발생하지 않도록 운영할 계획입니다.

네, Compit은 웹 기반 플랫폼이므로 별도의 소프트웨어나 IDE를 설치할 필요가 없습니다. 브라우저만 있으면 바로 코드 에디터를 열어 챌린지를 시작할 수 있습니다. 내장된 Monaco Editor(VS Code 기반)를 통해 자동 완성, 구문 강조, 오류 표시 등 전문 개발 환경과 동일한 편의 기능을 제공합니다. 인터넷에 연결된 컴퓨터라면 어디서든 접속하여 코딩 연습을 이어갈 수 있습니다.

각 챌린지에는 완성해야 할 타겟 디자인 이미지가 제공됩니다. 화면 왼쪽에 타겟 디자인이 표시되고, 오른쪽 코드 에디터에서 HTML, CSS, JavaScript 등을 작성하면 하단 프리뷰에서 결과물을 실시간으로 확인할 수 있습니다. 타겟과 최대한 동일하게 구현한 뒤 제출 버튼을 누르면 AI가 레이아웃, 색상, 타이포그래피, 반응형 대응 등 여러 기준으로 채점하여 100점 만점의 점수와 상세 피드백을 제공합니다.

Compit의 AI 채점 시스템은 제출한 코드의 렌더링 결과를 타겟 디자인과 비교하여 평가합니다. 레이아웃 구조의 일치도, 색상 및 간격의 정확성, 폰트와 텍스트 스타일의 유사도, 반응형 대응 여부 등 다양한 항목을 종합적으로 분석합니다. 단순히 시각적 유사도만 보는 것이 아니라 코드의 구조적 품질과 접근성까지 고려하여 점수를 산출하며, 개선이 필요한 부분에 대해 구체적인 피드백 메시지도 함께 전달됩니다.

챌린지는 초급(Easy), 중급(Medium), 상급(Hard)의 세 단계로 구분됩니다. 초급 챌린지는 단순한 텍스트 배치나 기본 레이아웃 구성 등 HTML/CSS 기초를 다루며, 중급 챌린지는 플렉스박스, 그리드 레이아웃, 호버 효과, 간단한 애니메이션 등을 포함합니다. 상급 챌린지는 복잡한 반응형 페이지 레이아웃, 인터랙티브 컴포넌트, 프레임워크 기반 구현 등 실무 수준의 과제가 출제됩니다. 자신의 수준에 맞는 난이도부터 시작하여 점차 올려가는 것을 추천합니다.

현재 Compit에서는 기본 HTML/CSS/JavaScript 모드를 비롯하여 React, Vue, TypeScript 모드를 지원합니다. 각 프레임워크별로 전용 스타터 코드와 채점 기준이 마련되어 있어, 프레임워크 고유의 문법과 패턴을 연습할 수 있습니다. React 챌린지에서는 JSX와 CSS를 작성하고, Vue 챌린지에서는 template, script, style 영역을 구분하여 코드를 작성합니다. TypeScript 챌린지는 타입 정의와 인터페이스 활용 등 타입스크립트 고유의 개념을 연습할 수 있도록 설계되었습니다.

Compit은 프론트엔드 개발의 기초부터 심화까지 다양한 학습 콘텐츠를 제공합니다. CSS Flexbox와 Grid 레이아웃, 반응형 웹 디자인, JavaScript DOM 조작, 이벤트 처리 등 핵심 개념을 코드 예제와 함께 설명하는 튜토리얼이 준비되어 있습니다. 또한 React 기초 입문, 컴포넌트 설계 패턴, 상태 관리 등 프레임워크 관련 학습 자료도 지속적으로 추가되고 있어 체계적으로 실력을 쌓아갈 수 있습니다.

웹 개발자라면 반드시 알아야 할 보안 기초 지식을 쉽게 배울 수 있는 교육 모듈입니다. XSS(크로스 사이트 스크립팅), CSRF(사이트 간 요청 위조), SQL 인젝션, 안전한 인증 처리, HTTPS와 콘텐츠 보안 정책 등 실무에서 빈번하게 발생하는 보안 위협과 대응 방법을 다룹니다. 각 주제별로 공격 원리, 실제 사례, 방어 코드 예시를 함께 제공하여 이론과 실습을 동시에 학습할 수 있도록 구성되어 있습니다.

바이브코딩(Vibe Coding)은 AI와 함께 코딩하는 새로운 개발 방식을 의미합니다. Compit의 바이브코딩 가이드에서는 AI 도구를 효과적으로 활용하여 프로덕트를 만드는 방법, 프롬프트 작성 요령, AI 생성 코드를 검증하고 개선하는 기법 등을 단계별로 안내합니다. 단순히 AI에게 의존하는 것이 아니라, AI를 파트너로 활용하면서도 코드에 대한 이해와 판단력을 유지하는 균형 잡힌 개발 습관을 기르는 것이 핵심 목표입니다.

프론트엔드 입문자라면 먼저 HTML/CSS 기초 챌린지(초급)를 풀면서 레이아웃과 스타일링 감각을 익히는 것을 추천합니다. 이후 JavaScript DOM 조작과 이벤트 처리를 학습하고, 중급 챌린지로 넘어가서 Flexbox, Grid, 반응형 디자인을 실전 연습합니다. 프레임워크에 관심이 있다면 React 기초 학습 자료를 읽은 뒤 React 챌린지에 도전해보세요. 보안 교육은 기본적인 코딩이 익숙해진 시점에 병행하면 좋으며, 바이브코딩 가이드는 어느 단계에서든 참고할 수 있습니다.

챌린지를 풀고 제출한 작품은 쇼케이스에 공유할 수 있습니다. 챌린지 완료 후 나타나는 결과 화면에서 쇼케이스 공유 옵션을 선택하면, 작품의 코드와 프리뷰가 다른 사용자들에게 공개됩니다. 공유된 작품에는 제목과 간단한 설명을 추가할 수 있으며, 다른 개발자들의 접근 방식을 참고하거나 자신만의 창의적인 해결 방법을 보여줄 수 있는 좋은 기회가 됩니다. 포트폴리오 용도로도 활용 가능합니다.

네, 쇼케이스에 공유된 작품에는 좋아요(투표)를 누르거나 댓글을 작성할 수 있습니다. 좋아요를 많이 받은 작품은 인기 작품으로 상위에 노출되어 더 많은 사람들이 볼 수 있게 됩니다. 댓글을 통해 코드에 대한 피드백을 주고받을 수 있으며, 구현 방식에 대한 질문이나 개선 아이디어를 나눌 수도 있습니다. 커뮤니티 참여를 통해 다양한 관점과 기법을 배울 수 있는 것이 쇼케이스의 큰 장점입니다.

쇼케이스에 공유된 작품의 전체 소스 코드를 열람할 수 있습니다. HTML, CSS, JavaScript 코드를 탭으로 구분하여 확인할 수 있으며, 코드 하이라이팅이 적용되어 읽기 편합니다. 같은 챌린지라도 개발자마다 전혀 다른 접근 방식을 사용하므로, 다른 사람의 코드를 분석하면서 새로운 CSS 기법이나 레이아웃 패턴을 발견할 수 있습니다. 이러한 코드 리뷰 경험은 실무에서도 매우 유용한 역량으로 이어집니다.

Compit은 이메일 기반의 간편한 회원가입을 지원합니다. 상단 헤더의 로그인 버튼을 클릭하면 나타나는 인증 모달에서 이메일과 비밀번호를 입력하여 가입할 수 있습니다. 회원가입 후 이메일 인증을 완료하면 모든 기능을 이용할 수 있으며, 챌린지 풀이 기록, XP(경험치), 티어, 뱃지 등의 진행 상황이 계정에 자동 저장됩니다. 로그인하지 않아도 챌린지 풀이는 가능하지만, 채점 결과 저장과 쇼케이스 참여를 위해서는 로그인이 필요합니다.

Compit은 최신 웹 표준을 기반으로 개발되어 Chrome, Edge, Firefox, Safari 등 주요 모던 브라우저에서 원활하게 작동합니다. 코드 에디터의 성능과 호환성을 고려하면 Chrome 또는 Edge의 최신 버전 사용을 가장 권장합니다. Internet Explorer는 지원하지 않으며, 브라우저가 오래된 경우 일부 기능이 정상적으로 작동하지 않을 수 있으므로 최신 버전으로 업데이트하여 사용하시기 바랍니다.

Compit의 콘텐츠 페이지(학습 가이드, 블로그, 보안 교육 등)는 모바일 브라우저에서 정상적으로 열람할 수 있습니다. 다만, 코드 에디터를 사용하는 챌린지 풀이 기능은 화면 크기와 키보드 입력의 제약으로 인해 데스크톱 환경에서의 이용을 권장합니다. 모바일 접속 시 코드 에디터 대신 안내 메시지가 표시되며, 태블릿의 경우 가로 모드에서 제한적으로 사용할 수 있습니다. 최적의 학습 경험을 위해 노트북이나 데스크톱 PC를 사용해주세요.

Compit에는 학습 동기를 부여하기 위한 게이미피케이션 시스템이 적용되어 있습니다. 챌린지를 풀면 점수에 비례하여 XP(경험치)를 획득하고, 누적 XP에 따라 브론즈, 실버, 골드, 플래티넘, 다이아몬드 등의 티어가 부여됩니다. 또한 특정 조건을 달성하면 다양한 뱃지를 수집할 수 있습니다. 예를 들어 첫 번째 챌린지 완료, 연속 학습 기록 달성, 특정 프레임워크 챌린지 올클리어 등의 업적에 대한 뱃지가 제공됩니다. 랭킹 페이지에서 다른 사용자들과 순위를 비교할 수도 있습니다.