웹 페이지 디자인을 위한 대규모 언어 모델 비교 분석

2-1 LLM

현재 공개된 LLM 모델은 소스를 공개하지 않거나 공개하는 경우가 있으며, 공개되어 있는 경우라도 상세히 어떤 학습 기술이 활용되었는지, 학습 파라미터(parameter) 설정값을 공개하지 않고 있다. 다른 모델과 성능 비교만을 다루거나 어떤 데이터를 학습에 활용했는지만 공개되어 있으며 이는 학술지에 공개된 것이 아닌 모델 제작사에서 발행한 블로그나 기술문서(technical report), 깃허브(github) 코드로 공개되어 있다. 본 절에서는 2024년에 공개한 모델로 연구에 활용한 4가지 모델에 관해 간략히 기술한다.

먼저 LLaMA(Large Language Model Meta AI) 모델은 Meta AI 팀에서 개발한 LLM으로 현재 버전은 3까지 있으며 버전 1에서는 비교적 작은 크기의 모델을 통해 GPT-3보다 더 좋은 성능을 보였다[4]. GPT-3의 경우 1,750억 개를 가지고 있다면 LLaMA 1은 최대 650억 개다. 버전 2의 경우 모델 확장성과 다국어 지원에 초점을 뒀으며 버전 3의 경우 마이너 업그레이드를 통해 파라미터 개수 증가, 멀티모달 강화, 온디바이스(on-device) 기능이 추가됐다[5],[6].

Qwen(Qianwen) 모델은 Alibaba 그룹에서 공개한 모델로 파라미터 수는 18억, 70억, 140억 개의 모델을 지원해 LLaMA2 보다 더 좋은 성능을 보였으며 수학, 코딩에 특화된 모델을 따로 지원한다[7],[8].

DeepSeek 모델은 DeepSeek사와 베이징대학교가 합작해 만든 코딩에 특화된 모델로 깃허브에 오픈소스로 공개된 코드 데이터를 활용하였다[9]. 특히 코드를 프로젝트 레벨의 코딩 시나리오를 분류해 학습했으며 87개의 프로그래밍 언어와 2조 개의 토큰이 활용되어 13억, 330억 개의 파라미터 버전을 지원한다.

2-2 미세조정 기법

LLM은 파라미터 개수가 많으므로 모든 파라미터 학습(full-training)이 컴퓨팅 자원이 충분하지 않으면 불가능하다. 따라서 사전 학습 모델에서 일부 파라미터만을 수정하는 학습을 진행해야 한다. 이러한 기법을 PEFT(Personalized Fine-Tuning)라고 하며, 2가지 방식이 있다.

LoRA(Low-Rank Adaptation)는 Microsoft AI팀이 개발한 기법으로 사전 학습 모델을 동결(freeze)하고 낮은 랭크 행렬을 추가해 성능을 조정하는 방식이다[10],[11].

QLoRA(Quantized LoRA)는 LoRA를 기반으로 모델 파라미터를 4비트 혹은 8비트로 양자화하여 GPU와 TPU의 메모리 사용량을 줄이고 속도를 향상한 기술을 말한다[12]. 이에 관한 파라미터 설정은 3-3절에서 기술한다.

3-1 실험 데이터셋

본 연구에 활용하기 위해 데이터셋으로는 웹 페이지 구성 요소인 HTML과 CSS 코드가 필요하고 사용자 동적 이벤트를 처리하기 위한 JavaScript 코드가 필요하다. 이는 여러 웹 페이지를 크롤링(crawling)하여 수집할 수 있지만 이 과정에서 발생하는 디자인권 문제, 크롤링 과정에서 과도한 트래픽을 유발하여 업무 방해의 문제가 있어 활용하지 못하였다.

이러한 이유로 인해 본 연구에서는 오픈소스(open source)로 공개되어 있는 데이터셋을 활용하고자 한다. AI 모델과 데이터셋을 연구 목적으로 활용하고자 한 플랫폼인 HuggingFace에 공개된 WebSight 데이터셋이며 웹 페이지의 이미지, 코드, 웹 페이지의 내용과 형태 혹은 레이아웃에 관한 설명을 제공한다[13]. 이에 관한 주요 특징은 표 1과 같으며 예시는 그림 1과 같다.

Table 1.

Features of the WebSight dataset

Fig. 1.

WebSight dataset example

본 연구에서는 이미지, 동영상, 텍스트, 음성 등 다양한 형태의 데이터를 혼합한 학습 모델인 멀티모달(multi-modal) 모델이 아니므로 v2 버전의 이미지가 있는 데이터셋을 학습할 수 없으므로 v1 버전의 데이터셋을 활용하였다.

학습의 효율성을 높이고 컴퓨팅 자원을 절약하기 위해 데이터 샘플링(sampling)은 전체 1.91M 개의 데이터에서 무작위로 10,000개의 데이터를 추출해 실험에 활용하였다.

3-2 실험 설계

그림 2는 모델 학습에 전반적인 모식도이다.

Fig. 2.

Model learning schematic diagram

먼저 WebSight v1 데이터셋을 활용해 4개의 모델을 미세조정하고, 최종 평가(evaluation)를 수행한다. 모델은 2장에서 언급한 모델 4개를 선정하였으며 모두 2024년에 공개된 모델이다. 아울러 모델 이름에서 “(Coder)”로 명시된 모델은 코딩에 특화된 모델이고, 명시되어 있지 않으면 일반화된 모델이다.

LLM 모델을 학습할 수 있는 플랫폼인 LLaMA-Factory를 사용했다. 모델 4비트 양자화 및 PEFT 기법(LoRA, QLoRA)이 적용된 최적화된 메모리 구조를 제공과 하드웨어 호환성을 맞추기 위한 Unsloth 라이브러리를 활용하였다. 학습된 모델을 로컬 환경에서 평가하고 추론하기 위해 Ollama도 함께 활용하였다. 표 2는 하드웨어 환경을 정리한 것이다.

Table 2.

Hardware environment

3-3 모델 학습

앞서 언급한 4가지 모델에 관해 동일한 환경과 동일 파라미터를 설정해 진행하며 설정값은 표 3과 같다.

Table 3.

Setting learning parameters

표 3에서 기울임으로 ‘*’ 표시된 LLaMA 3.2는 파라미터 수가 경량화 모델로 1B, 3B밖에 없으며, 그 이상인 11B, 90B인 모델은 멀티모달 모델이다. 따라서, LLaMA 3.2는 파라미터 수가 3B인 모델로만 쓸 수 있으며 QLoRA를 하지 않고, LoRA로만 하여도 충분히 학습된다. 이에 따라 양자화 비트는 당연히 없다.

양자화 타입으로 bitsandbytes 라이브러리를 사용하였다. 이는 HuggingFace에서 개발한 경량화 라이브러리로 GPU에서 저비트(low bit) 양자화 연산을 지원하며 메모리 사용량을 대폭 줄일 수 있다. 연산 타입으로는 bf16, 단정도 실수(single precision, 혹은 float) 16비트를 사용하였다. 이는 가중치(weight) 값의 소수점 자릿수를 제한하여 효율적으로 메모리를 사용할 수 있다.

LoRA 랭크(rank)는 모델이 업데이트할 수 있는 저차원 가중치 행렬 크기를 의미하며, 이 값이 크면 모델이 더 많은 파라미터를 조정할 수 있지만, 그만큼 복잡도가 커질 수 있다. LoRA 알파(alpha) 값은 스케일링(scaling) 값으로 이 값이 클수록 저차원 가중치 행렬의 영향력이 더 커지고, 이 값이 낮으면 반대로 사전 학습 모델(기본 모델)의 가중치 행렬의 영향이 더욱 커진다. 본 연구에서는 각각 기본값인 8, 16을 사용하였다.

LoRA 드롭아웃(dropout)은 저차원 가중치 행렬의 과적합(overfitting)을 방지하기 위해 일부 가중치를 0으로 만드는 것이며, LoRA 비트 정밀도(bit precision)는 연산의 정밀도를 설정하는 것으로 보통 8비트 혹은 16비트를 사용한다. 이 값이 낮아질수록 연산 비용이 줄지만, 정밀도가 떨어질 수 있다. 본 연구에서는 각각 0, 8을 사용하였다. 그 외에 파라미터는 모두 LLaMa-Factory의 기본값을 사용하였다.

3-4 성능 평가 기준

본 연구에서는 평가 기준으로 전체 부동 소수점 연산(Total Floating Point Operations, 이하 Total FLOPs), 손실(loss) 값, 초당 샘플 처리 수(samples per seconds), 초당 처리 반복 수(steps per seconds)를 활용하였다.

Total FLOPs는 모델 학습 과정에서 수행한 부동 소수점 연산량으로 이 값이 크다면 학습 과정에서 많은 연산을 수행해 복잡성이 크다는 의미이고, 반대로 값이 낮다면 학습에 필요한 연산이 적다는 의미이다.

손실 값은 배치 크기 N, 최대 시퀀스 길이 T에 관하여 모델이 예측한 코드에 관한 확률 분포 $$ {\hat{y}}_{i,t}$$와 실제 정답 코드 벡터 확률 분포 y_i,t간의 로그 우도(likelihood)를 의미한다. 이를 교차 엔트로피(cross entropy)라고 하며 이에 관한 수식은 아래 수식 1과 같다.

4-1 실험 결과

위 장에서 기술한 동일한 하드웨어 환경과 학습 파라미터 환경에서 실험한 결과는 표 4와 같다.

Table 4.

Final experiment results

Total FLOPs의 경우 LLaMA 3.2에서 가장 낮은 결과를 보였는데, 이는 표 3에서 언급한 바와 같이 파라미터 수가 가장 적기 때문이다. 일반 Qwen 2.5 모델보다 Coder 모델이 더 높은 연산량을 보였으며 이는 일반화 모델보다 코딩에 특화된 모델이 더 많이 학습되었음을 알 수 있다.

손실 값에서는 DeepSeek 모델이 가장 성능이 높은 것으로 나타났고, Qwen 2.5에서 일반화 모델이 코딩에 특화된 모델보다 더 성능이 높은 것으로 나타났다. 각각의 모델에 관한 반복 횟수에 따른 손실 변화 그래프는 그림 3에서 6과 같다.

Fig. 3.

Qwen 2.5 loss graph

Fig. 4.

LLaMA 3.2 loss graph

Fig. 5.

Qwen 2.5 Coder Loss Graph

Fig. 6.

DeepSeek Coder loss graph

위 4개의 손실 그래프의 개형을 봤을 때 LLaMA 3.2는 파라미터 수가 적어 800번의 단계만으로 훨씬 더 빨리 수렴하는 것을 볼 수 있고, Qwen 2.5 Coder와 DeepSeek Coder 모델이 1,500번의 단계만으로 더 빨리 수렴하는 것을 볼 수 있다. 이에 관한 내용은 다음 2절에서 자세히 논한다.

Total FLOPs를 봤을 때는 코딩에 특화된 모델이 학습 연산이 많아 일반화 모델보다 더 학습을 많이 한 것으로 보이지만, 성능에서는 일반화 모델이 아무래도 코딩에 특화된 모델보다 일반화 성능이 뛰어난 것으로 나타났다.

학습에 총 걸린 시간(runtime)과 초당 샘플 처리 수와 초당 처리 반복 수의 경우 Qwen 2.5가 다른 모델에 비해 더욱 오래 걸리는 것을 볼 수 있다.

4-2 고찰

앞서 그림 3에서 6의 손실 그래프 결과를 봤을 때 Qwen 2.5 일반 모델이 가장 단계가 크다. 이는 배치 크기와 관련되어 있다고 볼 수 있다. LLaMA 3.2와 같이 단계가 가장 적은 모델의 경우 하나의 반복 횟수만으로 더 많은 데이터를 처리했다는 의미이고 이는 결국 배치 크기가 크다는 의미이다. 모델의 학습 파라미터 수, QLoRA의 사용 여부, 모델의 복잡도 등에 따라 배치 크기가 커질 수도 있고 작아질 수도 있다는 의미이다. 이를 비교한 그래프는 그림 7과 같다.

Fig. 7.

Training loss comparison graph for four models according to batch size

다만 실제 테스트 환경에서 맥락과 관계없는 결과가 출력되거나 한국어로 물어봤을 때 중국어, 영어로 대답하는 경우가 있다. 이에 관한 결과는 그림 8과 같다.

Fig. 8.

Example results out of context

아울러 출력 결과인 코드가 길어지거나 이에 관한 설명이 길어지면 추론 시간이 길어지고 컴퓨팅 자원 사용량이 기하급수적으로 늘어나 이러한 점은 보완해야 할 것으로 사료된다. 또한, 복잡한 디자인을 요구하는 경우 이러한 문제가 더 심화하여 올바른 결과로 이어지지 않은 것으로 나타났다. 이에 관한 그림은 그림 9와 같다.

Fig. 9.

Example results when complex design is required

그림 9와 같이, 레이아웃의 특정 요소 중 하나인 로고나 메뉴의 위치를 수정하라는 요청에 대해 문맥을 이해하지 못해 이를 반영하지 않았으며 중국어로 답변한다. 이러한 점에서 볼 때, 사용자 요구사항이 많아질수록 대처 능력이 떨어지는 것을 볼 수 있다.

본 연구에서는 웹 페이지를 디자인에 맞게 코딩해주는 것으로 일반적으로 코딩에 특화된 모델하고는 목적이 다르다는 한계가 있다. 여기서 일반적으로 코딩에 특화된 모델이란, 평가 방식과 학습에 활용된 프로그래밍 언어가 다르다는 의미이다.

먼저 평가 방식으로 프로그래밍 언어의 논리적 평가를 들 수 있다. 시간 복잡도(time complexity)와 공간 복잡도(space complexity)를 활용한 정량적 평가와 디자인에 관한 평가는 엄연히 다르다. 기존 코딩에 특화된 모델의 경우 기존 솔루션이 시간상 오래 걸리거나 메모리 점유율이 큰 코드의 경우 평가 점수를 낮게 준다.

마지막으로 HTML, CSS는 프로그래밍 언어가 아닌 마크업 언어(markup language)와 스타일 시트(style sheet)로써 작동되는 선언형 언어이며, JavaScript의 경우 프로그래밍 언어이긴 하지만 웹 페이지에서 보이는 이벤트를 담당하므로 사용자 친화적 디자인, 유려한 디자인이 담긴 코드 제작하고는 차이를 보일 수 있다. 특히, DeepSeek Coder에서 활용한 데이터셋의 경우 87개의 프로그래밍 언어가 활용되었는데 아래 표 5와 같이 상위 언어 비율과 표 6에서 HTML, CSS, JavaScript 비율과 큰 차이를 보인다[9]. 또한, 웹 페이지 구성에는 HTML, CSS, JavaScript가 상호작용하여 디자인을 구성하므로 이를 모두 활용하지 않으면 단순히 웹 페이지의 레이아웃만을 구성하는 결과를 보일 것으로 사료된다.

Table 5.

DeepSeek Coder dataset programming language top 5 clusters percentage

Table 6.

DeepSeek Coder dataset web page language percentage