3.1 Pix2code-ATT 소개

그림 1은 이미지에서 해당하는 코드를 생성하는 이미지-코드 변환 모델을 나타낸다. 주어진 웹 이미지는 실제 웹 이미지에 비해 간소한 형태이며 생성된 코드는 해당 이미지에 부합하는 DSL 코드이다. DSL 코드는 특정 목적을 위해 설계된 프로그래밍 언어로 실제 생성할 코드의 중간 형태이며 HTML 보다 간결하고 직관적이다. 이미지에서 HTML 코드를 직접 생성하는 것보다 DSL 코드를 생성함으로써 코드 생성이 보다 간결해지고 또한 차후에 HTML이 아닌 다른 프로그래밍 언어를 생성할 수 있어 확장성 측면에서 효과적이다. 예를 들어, 안드로이드 코드나 iOS 코드로 확장할 수 있다. 또한, 생성 언어에 따라 DSL을 확장할 수 있다. DSL 코드를 HTML 코드로 변환하는 작업은 사전에 정의된 템플릿에 의해 처리된다.

그림 1. 웹페이지 이미지에서 소스 코드 생성

Fig. 1. Generating Source Code from Webpage Images

3.2 Pix2code-ATT 구조

그림 2는 Pix2code-ATT 모델의 구조를 나타낸다. Pix2code를 구성하는 인코더와 디코더를 기반으로 어텐션 모듈을 추가한다. 이미지 데이터는 CNN을 통해, DSL 코드는 LSTM 모듈을 통해 인식된다. 추출된 이미지 특성과 DSL 특성은 특성 연결(Feature Concatenation) 과정 후 디코더 기능의 LSTM 모듈의 입력으로 사용된다. LSTM 디코더는 이를 기반으로 이미지 컴포넌트에 해당하는 DSL 토큰을 생성한다. 추가된 어텐션 모듈은 LSTM의 장기 의존성(Long-term Dependencies) 문제 ^[15]에 대한 해법이 될 수 있을 것이다. LSTM이 RNN의 장기 의존성 문제에 대한 해법으로 제시되었지만, 여전히 같은 문제점을 가진다. 어텐션 모듈은 입력 시퀀스 내의 각 토큰에 대해 가중치를 부여하여 중요한 정보에 더 집중하고, 덜 중요한 정보에는 덜 집중하도록 한다. 어텐션 모듈은 LSTM의 장기 의존성 문제에 보다 효과적일 것으로 기대된다.

그림 2. Pix2code-ATT 전체 구조

Fig. 2. The Overall Architecture of Pix2code-ATT

그림 3은 Pix2code-ATT 모델을 구성하는 웹페이지 이미지 처리를 위한 CNN 모듈 계층과 출력 형상을 나타낸다. 화면 이미지의 특성 추출을 위해 케라스 프레임워크가 제공하는 Conv2D 계층을 4개 사용한다. 입력 데이터의 공간 차원을 줄이기 위해 최대 풀링이 사용되고 모델의 과적합을 방지하기 위해 dropout 계층을 사용하였다. 4개의 Conv2D 계층에서 추출된 특성맵은 flatten 계층에서 1차원 벡터로 변환되며 완전 연결(Fully-connected) 신경망 계층으로 입력된다.

그림 3. Pix2code-ATT의 CNN 구조

Fig. 3. The Architecture of the CNN in Pix2code-ATT

그림 4는 Pix2code-ATT에 사용된 LSTM 셀에 대한 시각적 표현과 해당하는 수식을 나타낸다 ^[16]. LSTM 구조의 특성은 입력 게이트(it), 망각 게이트(ft), 출력 게이트(ot)를 통해 정보의 흐름을 조절하는 게이트(Gate) 메카니즘을 사용한다. ϕ와 σ는 활성화함수로 각각 시그모이드와 하이퍼볼릭탄젠트를 나타낸다. 셀 상태(Cell State, ct)는 이전 상태에서 현재 상태로 전달되는 메모리 기능을 수행하며 입력 게이트와 망각 게이트를 통해 조정된 정보들이 더해져 새로운 셀 상태를 생성한다.

그림 4. Long Short-Term Memory(LSTM) 셀의 구조

Fig. 4. The Architecture of Long Short-Term Memory(LSTM) Cell

그림 5. 트랜스포머 블록의 구조

Fig. 5. The Architecture of the Transformer Block

그림 5는 Pix2code-ATT 모델에서 사용한 트랜스포머 블록구조 ^[17]를 나타낸다. 트랜스포머 블록은 MultiHeadAttention, LayerNormalization, Dense, Dropout 레이어로 구성된다. MultiHeadAttention 레이어는 Self-Attention 구현을 위해 사용되며 입력 데이터에 대해 다중 헤드 어텐션을 수행한다. 하이퍼파라미터인 num_heads는 어텐션 헤드 개수를 나타내며 실험에서 8개의 헤드가 사용된다. 이는 8개의 병렬 어텐션이 이루어짐을 나타낸다. 입력 데이터에 대해 각각의 어텐션 가중치를 계산하고, 가중합을 통해 어텐션 결과를 생성한다. 병렬 어텐션을 모두 수행한 후 모든 어텐션 헤드를 연결(Concatenate)한다. LayerNormalization 레이어는 입력 데이터의 평균과 표준편차를 사용하여 레이어 정규화를 수행한다. 입력 데이터에 대해 완전 연결 신경망을 적용하는 Dense 레이어가 사용되며 활성화 함수로는 ReLU를 사용한다. Dense 레이어 이후에 Dropout 레이어를 통해 입력 데이터의 일부를 무작위로 선택하여 드롭아웃을 수행함으로써 과적합 방지 효과를 기대한다.

4.1 실험Ⅰ: Pix2code 데이터 세트에 대한 성능 평가

실험Ⅰ에서는 Pix2code에서 제공하는 기본 데이터 세트를 사용한다. Pix2code-ATT 모델 학습을 위해 1,219개 이미지와 이미지에 해당하는 DSL 코드가 사용되었으며 모델의 시험을 위해 523개의 이미지가 사용되었다. 이미지에서 생성된 HTML 코드는 Bootstrap CSS를 따른다. 한 장의 이미지는 하나의 홈페이지 화면을 나타내며 크게 header, 여러 개의 row, footer로 구성된다. 각 구성요소는 HTML의 div 태그를 사용하여 화면을 구성한다. header는 여러 개의 버튼으로 구성되며 활성화 혹은 비활성화된다. row는 1개, 2개, 또는 4개의 컬럼으로 구성된다. 각 컬럼은 small-title, text, 버튼으로 구성된다. 이미지가 나타내는 화면 구성은 실제 홈페이지에 비해 단순한 형태이지만 제안하는 모델의 성능을 평가하기에 적절한 것으로 판단된다.

그림 6은 훈련 및 시험 데이터 세트에 포함된 row 컴포넌트 개수를 나타낸다. DSL 파일에 따라 컴포넌트 row 개수는 하나에서부터 셋까지 분포한다. 훈련용 이미지에서 세 개의 row로 구성된 데이터의 비율은 76%이고, 전체 시험용 이미지에서 세 개의 row 구성된 이미지는 80%에 해당한다. 이미지에 포함된 row 컴포넌트의 수가 많을수록 복잡도가 증가하며 인식이 실패하는 부분이 발생할 가능성이 높아질 수 있다. 이미지의 부분 인식 실패는 생성 코드의 미완성을 초래한다. row가 1, 2, 3개인 경우, row에 포함된 컴포넌트는 최소 3개에서 최대 36개 구성된다. 그러므로 row 개수가 많고 내부 구성 컴포넌트가 많은 경우, 해당 이미지에 대한 인식률이 떨어질 수 있다.

그림 6. 훈련 및 시험 데이터 세트에 포함된 row 개수

Fig. 6. The Number of Rows in the Training and Testing Datasets

그림 7은 기본 데이터 세트에 적용된 Pix2code와 Pix2code-ATT 모델의 에포크 값에 따른 학습 손실을 나타낸다. 모델의 학습 시작 후 에포크 값이 5가 되는 시점까지 학습 손실이 급하게 떨어지고 있음을 알 수 있으며 대략 9.5 대의 정확도 (Accuracy)를 유지한다. 이후 에포크에는 학습 손실에 큰 변화가 없이 에포크 70이 될 때까지 일정한 값을 유지함을 알 수 있다. 즉, 에포크 초기에 두 모델에 대한 학습이 충분히 이루어지며 에포크 50 이후에 두 모델의 학습 손실이 거의 유사해지고 있다.

그림 7. 에포크에 따른 학습 손실 시각화

Fig. 7. Visualizing Training Loss in terms of the Epoch Size

두 모델의 성능 평가를 위해 각 모델이 생성한 DSL 코드와 Ground-truth에 해당하는 정답 코드와의 오류율을 측정하였다. 오류율 메트릭을 기반으로 정확도 측면에서 제안된 모델의 DSL 코드 생성 기능을 평가한다. 오류율은 정답 DSL 코드에 대해 생성된 DSL 코드의 오류를 정량화한다 ^[18]. 오류율은 ^{[0, 1]} 사이에 분포하며 생성 코드가 완벽하게 일치한 경우는 오류가 없으므로 오류율은 0이 되며 생성 코드의 길이가 다르거나 생성된 DSL 토큰이 모두 다른 경우는 최대 오류율인 1이 할당된다. Ground-truth 코드와 생성된 코드의 길이가 다른 경우는 최대 오류값인 1이 할당된다. 전체 길이가 같은 경우는 생성 코드의 토큰과 Ground-truth 토큰이 동일하면 0을, 다른 경우는 1을 할당한다. 모든 토큰에 대해 상호 비교를 적용한다.

표 1은 멀티헤드 어텐션층의 헤드 수(2, 4, 8개 적용)에 따른 Pix2code-ATT 모델이 생성한 코드 오류율이다. 실험 결과에 따라 오류율이 최소인 헤드 수를 8로 설정한다.

표 2는 제안된 8 헤드 Pix2code-ATT와 기존 Pix2code의 성능 비교를 위해 오류율을 측정한 결과이다. 1,219개 이미지와 상응하는 DSL 코드가 각 모델의 학습에 사용되었으며 오류율은 시험용 데이터인 523개의 이미지에 적용되었다. Pix2code 모델의 경우, 60 에포크에서 오류율이 10.92로 최소값을 보였으며 Pix2code-ATT 모델은 50 에포크에서 오류율이 6.81로 Pix2code에 비해 성능이 우수함을 알 수 있다.

4.2 실험 Ⅱ: 복잡한 합성 데이터 세트에 대한 성능 평가

실험Ⅱ는 실험Ⅰ에서 사용한 데이터 세트에 추가 생성한 이미지와 코드로 구성된 데이터 세트를 사용한다. 그림 8과 같이 기존 데이터 세트에 새로운 row를 마지막에 추가한다. 새롭게 추가된 row들은 1, 2, 또는 4개의 컬럼으로 구성된다. 각 컬럼은 버튼과 텍스트로 구성된다. 그림 8에서 기존 이미지는 3개의 row로 구성되었으며 새롭게 4번째 row가 추가된 이미지가 생성되었다. 추가된 이미지는 임의로 결정되며 이에 해당하는 DSL 코드를 확인할 수 있다.

그림 8. 추가된 마지막 row(이미지에서 둥근 사각형 표시 부분)와 상응하는 DSL 코드

Fig. 8. The Added row marked with the Round Square in the Image and its Corresponding DSL Code

그림 9는 추가된 데이터 세트에 포함된 row 개수의 분포를 나타낸다. 훈련 및 시험 데이터의 비율이 8:2로 각각 2,368개와 592개이다. 기본 데이터 세트에 4번째 row가 추가되며 총 1,218개의 데이터가 증가하였다. 4번째 row의 추가된 기존 이미지에 비해 이미지 복잡도가 증가하였다.

그림 9. 확장된 훈련 및 시험 데이터 세트의 row 개수

Fig. 9. The Number of rows in the Extended Training and Testing Datasets

새롭게 추가된 row에 대해 생성된 코드는 버튼 정보 등 일부 내용이 인식되지 않거나 row의 마지막 괄호(\})가 누락되는 경우가 발생하였다 (그림 10 참조). 또한, row의 quadruple을 double로 인식함으로써 생성된 코드의 길이가 Ground-true 코드의 길이에 비해 짧아지는 경우가 발생하였다. 길어진 DSL 코드로 인해 학습과 시험 과정에서 정확도가 떨어진 것으로 판단되며 제안된 모델의 하이퍼패러미터를 세부 조정하거나 새로운 모델 계층을 추가함으로써 성능 개선을 기대할 수 있을 것이다.

그림 10. DSL 코드 생성 실패 사례들

Fig. 10. The Failure Cases of DSL Code Generation

표 3은 확장된 데이터 세트에 대해서 Pix2code-ATT의 DSL 생성 코드의 오류율을 표현한다. 에포크 값이 5 이후로 에러율이 일정 범위내에서 유지됨을 알 수 있다. 에포크 5 시점에 학습 손실이 크게 줄었던 사항을 반영한 결과라고 판단된다.