플러스프로젝트 배경
1. 문제점 비개발자는 간단한 화면·로직도 코드 없이는 만들 수 없음 기존 코딩 교육 도구는 결과 확인까지의 피드백이 느림 2. 프로젝트 목표 드래그 앤 드롭 블록 조합으로 화면을 만드는 웹 에디터 구현 블록 조합 → 코드 → 실행 결과가 실시간으로 이어지는 경험 제공 3. 주안점 XML→JSX 실시간 변환의 정확성과 성능 비개발자 눈높이의 오류 안내
프로젝트 성과
실시간 변환 에디터 구현
블록 조합을 JSX 코드로 즉시 변환·표시하는 로직 설계
오류 검증 자동화
문법 오류 자동 감지·하이라이팅과 해결 방법 제안 기능 구현
직관적 편집 경험
블록 연결 가능 여부 시각 피드백으로 비개발자도 시행착오 없이 조합
핵심 기능
블록 드래그 앤 드롭
화면·스타일·글쓰기·버튼·사진·목록 블록을 조합해 페이지 구성
진행 단계
설계
2025.06.
블록 체계·XML→JSX 변환 구조 설계, API 설계
프로젝트 상세
비개발자도 코딩 로직을 구성할 수 있도록 Blockly 기반의 시각적 코딩 인터페이스를 구현한 웹 플랫폼입니다. 프론트엔드 개발과 API 설계를 담당했습니다. 블록을 드래그 앤 드롭으로 배치하면 XML을 JSX로 실시간 변환해 코드와 실행 결과를 즉시 보여주는 미리보기 화면을 구현했습니다. 블록 간 연결 가능 여부를 시각적으로 피드백하고, 문법 오류를 자동 감지·하이라이팅하며 원인과 해결 방법을 제안하는
