LLM이 코드를 짜는 시대: Sketch-Programming

React의 복잡성을 해결하기 위해 LLM을 활용한 새로운 프로그래밍 방식 제안

개발자가 의도를 Sketch 형태로 표현하면 LLM이 코드를 생성하는 방식

VS Code 플러그인을 통해 실제 개발 환경에서 사용 가능하며, CSS Next와 같은 새로운 문법도 지원

Sketch-Programming의 핵심 원리

Sketch-Programming은 LLM을 활용하여 개발자가 의도를 자연어에 가깝게 표현하면, LLM이 이를 JavaScript, C++ 등으로 변환한다. 구체적으로 VS Code 플러그인을 통해 개발 환경에서 직접 사용 가능하며, OpenAI Assistant를 사용하여 변환 규칙을 정의한다. 따라서 개발자는 복잡한 문법 대신 의도에 집중할 수 있다.

기존 프로그래밍 방식과의 비교

기존 컴파일러/트랜스파일러 방식은 엄격한 문법 규칙을 따르지만, Sketch-Programming은 LLM을 통해 유연성을 확보한다. 비결정성이라는 단점이 있지만, CSS Next와 같은 새로운 문법을 실험할 수 있다는 장점이 있다. 반면, 구문 강조 및 캐싱과 같은 엔지니어링 과제가 존재한다.

실제 개발에 적용하기 위한 가이드

Sketch-Programming을 사용하기 위해서는 VS Code 플러그인을 설치하고, Sketch 파일을 작성해야 한다. // @sketch:reactComponent와 같은 태그를 사용하여 컴포넌트를 정의하고, OpenAI API 키를 설정해야 한다. 따라서, 기존 코드베이스에 점진적으로 도입하여 생산성 향상을 기대할 수 있으며, 새로운 문법 실험에도 활용할 수 있다.