심층학습을 적용한 웹페이지 자동 생성 방법에 관한 연구 : 쇼핑 웹사이트를 중심으로 = The Research on Applying Deep Learning Methods to the Automatic Webpage Generation System : Focused on shopping websites

다국어 초록 (Multilingual Abstract)

This study aims to explore new methods of website creation to meet the surging demand
for website production, spurred by the increasing demand for online businesses and the
importance of non-face-to-face services. It has designed and implemented a system capable
of generating actual websites based on artificial intelligence and data, technologies of the
Fourth Industrial Revolution. Usability evaluations were conducted with IT experts and
general users to validate the proposed system.
The study was carried out in the following steps: First, it researched the overall process
and environment of website production, exploring the evolution of technology and
production environments, and identifying limitations. It examined the industry from website
production agencies to Wix's ADI (Artificial Design Intelligence) service and sought ways
to apply deep learning to automatic website generation systems. Second, it reviewed prior
research on artificial intelligence technologies, identified necessary deep learning models,
and selected models suitable for the analysis and inference of websites. Third, it established
a classification system based on industry types and functions of websites, classified
paragraphs and components of web pages, and designed a complete automatic website
generation system applicable to deep learning. Finally, it trained four types of deep learning
models, implemented inference capabilities, and integrated them with the automatic website
generation system to implement the full functionality of the system. Usability evaluations
were conducted with experts and the general public to verify the system's usability, aiming
to improve its effectiveness and directions for development.
The general procedure for website production consists of data collection, planning,
design, and development. This process has not changed significantly since the early 2000s
when the web spread rapidly in Korea, although there have been significant changes in the
production and service environments. The most significant change is that the production
environment is now mostly web-based. Whereas past web utilization was limited to email
or file-sharing services, recent practices involve using collaborative planning tools like
Google Sheets and presentations and collaborative design tools like Figma on websites.
Since the 2010s, services known as automatic website generation systems have been rapidly
disseminated, enabling even development to be completed on a web basis. These systems
allow for the easy implementation of various functions necessary for development with a
selection of features and some settings. Furthermore, the range of services these systems can
provide is gradually expanding, now encompassing planning and design.
This shift in the production environment paradigm towards automatic website
generation systems has led to the rapid emergence of the 'No-Code' production method,
which does not require development. In the field of design, the concept of 'Computational
Design,' a new concept based on computing and cutting-edge technology, is expanding. This
paradigm shift is changing to quickly produce cohesive and empathetic designs based on
templates. Since this paradigm shift is all based on web systems, it enables the collection
and automation of production data and procedures.
The core technology for automatically generating websites lies in the learning and
inference of artificial intelligence models. Therefore, to use the most suitable artificial
intelligence technology, a study was conducted on artificial intelligence technologies.
According to Aurelien Geron's book 'Hands-On Machine Learn,' artificial intelligence
technologies mainly consist of supervised learning, unsupervised learning, and
reinforcement learning, each with different usage areas, technical characteristics, and
application fields. This study falls under supervised learning, as it is based on existing data
for learning and finding answers. Deep learning in supervised learning includes three major
types: classification, object detection, and image segmentation. The study deemed a
'classification algorithm' for analyzing images and an 'algorithm for detecting elements' as
necessary.
To construct an environment where artificial intelligence models can learn and infer, it
is necessary to collect and process vast amounts of website data. While it was difficult to
collect numerous industry-specific and function-specific website production data in the past,
it is now possible to collect diverse and extensive data due to the proliferation of automatic
website generation systems, with the entire production procedure being web-based. This
study utilized an automatic website generation system to collect and process data,
conducting learning and inference of artificial intelligence models. The study also designed
and implemented an automatic website generation system based on artificial intelligence and
its integration with the web.
Next, the environment for the artificial intelligence-based automatic website generation
service must be a system capable of stably storing and using large amounts of data and
providing stable service against the traffic of numerous users. Therefore, the infrastructure
environment was determined to be cloud-based and designed as a SaaS (Software as a
Service) according to Sether Ayob's advantages of cloud computing (Ayob 2016).
The most prioritized part of the website production procedure is to understand the
minimum classification and functional requirements of the industry to which the customer's
desired website belongs. For this, the simplest and most effective method was deemed to be
receiving the address or image of a benchmarking website. When a website address is
entered, the system was designed to download the website as an image using the scraping
function proposed by Moaiad Ahmad Khder (Khder 2021). Then, the deep learning model
analyzes the image, and the inference results are matched with the data of the automatic
website generation system, following the overall structure and flow of the automatic code
generation (ACG) process proposed by John Vlissides (Budinsky, Finnie et al. 1996). The
design of artificial intelligence involved implementing at least three types of models for
analyzing and inferring websites. The first model, YOLOV8, was deemed most suitable for
'detecting paragraphs' that make up a page, using a single-layer object detection algorithm.
The second model, EfficientNetV2, was deemed suitable for 'classifying the types and
numbers of paragraphs' using a convolutional neural network's image classification
algorithm. The third model, similar to the first, was deemed suitable for 'detecting elements
such as images or text within paragraphs.' Subsequently, the study collected and labeled
about 1,000 e-commerce web pages for paragraphs, types, and elements, and based on this
data, trained the models. The trained models were then implemented in a serving
environment, and the entire interface capable of analysis and inference was implemented.
Finally, the study implemented 'DWAGS (Deep Learning-Based Website Automatic
Generation System),' a system that can automatically generate actual websites by receiving
the address or image of a benchmarking website.
To verify whether websites generated by DWAGS are suitable for immediate use in the
industry, a survey was conducted among actual IT experts and the general public. The first
evaluation yielded an average score of 3.8, confirming its usability, but various opinions for
usability improvement were converged, leading to the improvement of DWAGS. A second
evaluation was conducted with more survey participants to track the results. The second
usability evaluation resulted in an average score of 4.2, a 10% increase in evaluation scores,
and particularly high praise from experts, confirming its applicability in the industry.
Previous studies and cases of services provided by companies show that while research
and development in artificial intelligence are very active, image-based results are often
awkward or do not meet user intentions, making them insufficient for immediate application
in the industry. However, this study is of high practical value as it concretely proposes a new
suggestion that can be used in the industry by completely redesigning the website automatic
generation system based on data, leveraging the innovative technologies of artificial
intelligence, a leading technology of the Fourth Industrial Revolution. Although research in
the field of artificial intelligence-based image generation and design is actively underway,
the results are still fragmented and have clear limitations. Therefore, this study is significant
in the industry as a new data-based automatic generation system applying deep learning and
academically as a representative example of how innovative services can be integrated into
actual industries. Moreover, by concretizing the classification system for various paragraphs
and elements, which was previously lacking from an industry-specific and functional
perspective, the study contributes to the knowledge of various web industries, such as feature
development. Furthermore, it is expected to create a new paradigm in website production
and contribute to the development of the industry by providing fast and convenient services
to various entrepreneurs aspiring to online businesses, based on the maximization of
productivity with artificial intelligence.

국문 초록 (Abstract)

온라인 비즈니스의 수요 증가와 비대면 서비스의 중요성이 크게 높아짐에 따라 폭증한 웹사이트 제작의 수요를 감당하기 위하여 새로운 제작 방법을 모색할 필요가 있어, 인공지능과 데이터를 기반으로 실제 심층학습을 적용한 웹페이지 자동생성 시스템을 설계하고 구현하였다. 그리고, 구현된 시스템에 대해 IT 전문가와 일반 사용자를 대상으로 사용성 평가를 실시하여 제안된 시스템을 검증하였다.
본 연구는 다음과 같은 절차에 따라 진행되었다. 첫째, 웹사이트 제작의 전반적인 절차와 환경을 조사하여 기술과 제작환경의 발전을 연구조사 하였으며, 한계점을 확인했다. 웹사이트 제작 전문 대행업체로부터 윅스의 ADI(Artificial Design Intelligence)서비스에 이르기까지 산업의 전반을 둘러보고, 웹사이트 자동 생성 시스템에 심층학습을 적용할 방법을 모색했다. 둘째, 인공지능 기술에 대한 선행연구를 검토하고 필요한 분야의 심층학습 모델을 확인하였으며, 웹사이트의 분석 및 추론에 적합한 심층학습 모델을 선택하였다. 셋째, 웹사이트의 산업 유형과 기능을 바탕으로 분류체계를 수립하고, 웹페이지의 단락이나 구성요소도 유형 분류를 하였으며, 심층학습이 적용가능한 웹사이트 자동 생성 시스템 전체를 설계하였다. 마지막으로 심층학습 모델 4종을 학습하고 추론기능을 구현하였으며 이를 웹사이트 자동 생성 시스템과 융합하여 시스템 전체 기능을 구현하였다. 그리고 구현된 시스템의 사용성을 검증하기 위해 전문가와 일반인 두 그룹에 대하여 사용성 평가를 실시하였으며, 발전방향을 도출하며 완성도를 향상시키고자 하였다.
웹사이트 제작의 전반적인 절차는 크게 자료수집, 기획, 디자인, 개발의 순으로 이루어지고 있다. 이 절차는 국내에 웹이 빠르게 보급되던 2000년대 초반부터 현재까지 큰 변화가 없었으나, 제작 환경이나 서비스 환경에는 큰 변화가 있었다. 가장 큰 변화는 제작 환경이 대부분 웹을 기반으로 이루어진다는 것이다. 과거의 웹 활용도는 이메일 또는 파일 공유 서비스를 이용하는 수준이었으나, 최근에는 구글의 시트나 프레젠테이션 같은 협업기반의 기획도구와 피그마와 같은 협업 기반의 디자인 도구를 웹사이트에서 사용하며 제작을 완료한다. 또 2010년대부터는 웹사이트 자동 생성 시스템이라 불리는 서비스가 빠르게 보급되며 개발마저 웹기반으로 제작을 완료할 수 있도록 하였다. 웹사이트 자동 생성 시스템은 기능의 선택과 약간의 설정으로 개발이 필요한 각종 기능을 웹에서 쉽게 구현할 수 있다. 또 지속적으로 기능을 늘리고 템플릿의 양을 확대해서, 최근에는 기획 및 디자인까지 모두 웹사이트 자동 생성 시스템에서 제작할 수 있도록 하는 등 서비스 가능한 영역을 점차 확대하고 있다.
이렇듯 제작 환경의 패러다임이 웹사이트 자동 생성 시스템을 중심으로 점차 바뀌며 개발이 필요 없는 제작 방법인 ‘노코드(No-Code)’라는 개념이 급부상했다. 디자인의 영역에서도 컴퓨팅과 최신 기술을 바탕으로 만드는 새로운 개념인 ‘컴퓨테이셔널 디자인(Computational Design)’이 확대되며, 템플릿 기반으로 조합해가며 짜임새 있고 공감할 수 있는 디자인을 빠르게 제작하는 패러다임으로 바뀌고 있다. 이러한 패러다임의 변화는 모두 웹시스템을 기반으로 하기 때문에 제작 데이터의 수집이나 제작 절차의 자동화를 가능케 하고 있다.
웹사이트를 자동 생성하는 핵심 기술은 인공지능 모델이 학습과 추론을 하는데 있으므로 가장 적합한 인공지능 기술을 사용하기 위하여 인공지능 기술에 대한 조사를 실시하였다. 본 연구에서는 기존의 데이터를 기반으로 학습을 하고 답을 찾는 추론기반의 시스템이므로 지도학습에 해당한다. 지도 학습의 심층학습은 분류 (Classification), 탐지(Object detection), 세그멘테이션(Image segmentation)의 큰 세가지 종류가 있으며, 본 연구에서는 이미지를 분석하기 위한 ‘분류 알고리즘’과 요소를 ‘탐지하는 알고리즘’이 필요하다.
인공지능 모델이 학습 및 추론 가능한 환경을 구성하기 위해서는 웹사이트의 방대한 데이터를 수집하고 가공해야 한다. 과거에는 수많은 산업별 그리고 기능별 웹사이트 제작 데이터를 수집하기 어려웠으나, 근래에는 웹사이트 자동 생성 시스템의 보급으로 제작 전반의 절차가 웹기반 시스템으로 구성되어 있으며, 다양하고 많은 데이터 수집이 가능하다. 본 연구에서는 웹사이트 자동 생성 시스템 시스템을 이용하여 데이터를 수집 및 가공하고 인공지능 모델의 학습과 추론을 하며, 웹사이트 자동 생성 시스템과 인공지능을 융합하여 웹사이트 자동 생성까지 설계 및 구현하였다. 다음으로 인공지능 기반 웹사이트의 자동 생성 서비스의 환경은 많은 데이터를 안정적으로 저장하고 사용할 수 있는 시스템이어야 하며, 유동적이고 많은 사용자의 트래픽으로부터 안정적으로 서비스되어야 하므로 서버의 유연성과 확장성이 반드시 확보되어야 한다. 인프라 환경은 클라우드 기반으로 하며 SaaS(Software as a Service)의 형태로 서비스를 설계해야 한다.
웹사이트 제작의 절차 중 가장 우선시되는 부분은, 고객이 만들고자 하는 웹사이트가 어떤 산업에 해당되는지에 대한 최소한의 분류나 기능 요구사항을 파악해야 한다. 이를 위해 벤치마킹 웹사이트의 주소나 이미지를 입력 받는 것이 가장 간단하고 효과적이다. 웹사이트 주소가 입력되면, 스크랩핑(Scraping)기능을 활용해 해당 웹사이트를 이미지로 다운받도록 설계했으며, 이미지를 심층학습 모델이 분석하고 그 추론 결과를 기반으로 웹사이트 자동 생성 시스템의 데이터와 대응시켜, 자동화 코드 생성(Automatic Code Generation, ACG)의 과정이 수행되는 전체 구조와 흐름도를 설계했다. 인공지능의 설계에서는 적어도 3가지 종류의 모델이 구현되어야 웹사이트의 분석과 추론이 가능하다. 첫번째 모델은 페이지를 구성하는 ‘단락을 탐지’하기 위해, 단일 계층 객체 탐지 알고리즘의 YOLOV8이 가장 적합하다고 판단했다. 두번째 모델은 ‘단락의 유형과 단수를 분류’하기 위해 합성곱 신경망의 이미지 분류 알고리즘인 EfficientNetV2가 적합하다고 판단했으며, 마지막 세번째 모델은 단락 내에 존재하는 ‘이미지나 텍스트 등 요소의 종류를 탐지’하기 위해 첫번째와 같은 알고리즘이 적합하다고 판단했다. 이어서 각 인공지능 모델을 학습시키고자 전자상거래 웹페이지 1,000여개를 수집하여 단락, 유형, 요소에 대한 레이블링 가공작업을 하였고, 이 데이터를 바탕으로 모델의 학습이 이루어졌다. 학습된 모델을 바탕으로 서빙 환경을 구현하였으며, 분석 및 추론이 가능한 전체 인터페이스를 구현했다. 마지막으로 벤치마킹 웹사이트의 주소나 이미지를 입력 받고, 실제 웹사이트 자동 생성까지 가능한 시스템인 ‘DWAGS (Deep Learning-Based Website Automatic Generation System, 이하 DWAGS)’를 구현했다.
DWAGS로 생성된 웹사이트가 실제 산업에서 바로 사용하기에 적합한지를 검증하기 위하여 실제 IT전문가와 일반인을 대상으로 설문조사를 수행했다. 1차 평가 결과 평균 3.8점을 받아 사용 가능성을 확인할 수 있었으나 다양한 사용성 개선 의견이 수렴되어 DWAGS의 개선을 수행하였다. 그리고 그 결과를 추적 관찰하기 위하여 더 많은 설문 대상자에게 2차 평가를 실시했다. 2차 사용성 평가 결과 합계 평균 4.2점으로 10%가량의 평가 점수가 상승했으며, 특히 전문가로부터 호평을 받는 등 산업에 적용이 가능함을 확인할 수 있었다.
지금까지의 선행연구나 서비스되고 있는 기업의 사례를 살펴볼 때, 인공지능 연구 및 서비스의 개발은 매우 활발하지만, 이미지 기반의 결과물들은 아직은 어색하거나 사용자 의도에 부합하지 않아 산업에서 바로 적용하기에 부족한 경우가 많았다. 하지만 이 연구에서는 인공지능의 혁신성과 웹사이트 자동 생성 시스템을 데이터 기반으로 완전히 재설계함으로써, 산업에서 바로 사용할 수 있는 새로운 제안을 구체적으로 제시했음에 실무적인 가치가 높다. 인공지능 기반의 이미지 생성이나 디자인 분야는 최근 활발히 연구되고 있지만, 아직 단편적인 결과나 한계점이 뚜렷하므로 이 연구가 심층학습이 적용된 새로운 데이터 기반 자동생성 시스템으로써 산업에 의미가 매우 크며, 혁신적인 서비스가 어떻게 실제 산업과 융합 가능한지에 대한 대표적 사례로써 학술적으로도 의의가 크다. 또, 웹의 산업별, 기능별 관점에서 전무했던 다양한 단락과 요소에 대한 분류체계를 구체화했다는 점에서 규격을 만들기 위한 첫걸음일 수도 있으며, 기능 개발 분야 등 다양한 웹산업의 지식에 기여하였다. 나아가, 인공지능 기반 생산성의 극대화를 바탕으로 다양한 연구와 서비스 출시가 활발히 이뤄짐으로써, 웹사이트 제작의 새로운 패러다임을 만들고, 온라인 비즈니스를 희망하는 다양한 기업인에게 빠르고 편리한 서비스를 제공하는 등 산업의 발전에 이바지하기를 기대한다.

목차 (Table of Contents)

• 1장. 서론 18
• 1.1 연구의 배경 및 목적 18
• 1.2 연구의 범위와 방법 24
• 1.3 연구의 구성 29
• 2 장. 선행 연구 검토 31
• 2.1 웹사이트 제작 환경의 변화 31
• 2.1.1 CMS(Contents Management System) 31
• 2.1.2 웹사이트 자동 생성 시스템 35
• 2.2 웹사이트 자동 생성 시스템의 인공지능 적용 41
• 2.2.1 웹사이트 자동 생성 시스템의 인공지능의 융합 41
• 2.2.2 웹사이트 자동 생성 시스템의 심층학습 적용 선행연구 44
• 2.3 심층학습의 이해 54
• 2.3.1 인공지능(Artificial Intelligence)의 개념 54
• 2.3.2 기계학습(Machine Learning) 56
• 2.3.3 심층학습(Deep Learning)과 신경망 58
• 2.4 이미지 분류 대표 알고리즘 63
• 2.4.1 AlexNet 63
• 2.4.2 VGGNet 64
• 2.4.3 ResNet 65
• 2.4.4 EfficientNet 67
• 2.5 이미지 분류 대표 알고리즘 69
• 2.5.1 복수 단계 방식의 Faster RCNN 69
• 2.5.2 단일 단계 방식의 YOLO 알고리즘 71
• 3 장. 심층학습이 적용된 웹사이트 자동 생성 시스템의 설계 74
• 3.1 분류체계 수립 74
• 3.1.1 쇼핑몰 카테고리 분류체계 수립 74
• 3.1.2 웹페이지를 구성하는 단락(Section)의 분류체계 수립 77
• 3.1.3 단락을 구성하는 요소(Element)의 유형 분류체계 80
• 3.2 템플릿 기반 웹사이트 자동 생성 시스템 설계 82
• 3.2.1 템플릿 기반으로 설계하는 목적 82
• 3.2.2 템플릿 기반 설계 83
• 3.2.3 시스템 구현 기술 스택 85
• 3.3 심층학습 모델의 선택과 흐름도 90
• 3.3.1 객체 탐지를 위한 YOLOv8 모델 90
• 3.3.2 분류를 위한 EfficientNetV2 모델 91
• 3.4 웹사이트 자동 생성 시스템에 심층학습 적용방법 94
• 3.4.1 전체 시스템 구조 설계 94
• 3.4.2 심층학습 모델 기반 페이지 분석 방법 95
• 3.4.3 데이터 기반으로 웹페이지를 생성하는 방법 96
• 4 장. 심층학습 모델 및 시스템 구현 98
• 4.1 템플릿 데이터 기반 웹사이트 자동 생성 시스템 구현 98
• 4.1.1 템플릿의 정보 입출력을 위한 데이터베이스 설계 98
• 4.1.2 No-Code 편집기 기반 템플릿 렌더링 100
• 4.1.3 템플릿 정보 관리도구 103
• 4.1.4 완성된 템플릿 기반 시스템의 전체 흐름도 105
• 4.2 심층학습 모델 학습 106
• 4.2.1 심층학습 모델 학습의 공통적인 과정 106
• 4.2.2 단락(Section) 탐지모델 115
• 4.2.3 단락(Section) 유형 분류 모델 118
• 4.2.4 요소(Element) 탐지 모델 120
• 4.2.5 특징 탐지 122
• 4.3 웹사이트 자동 생성 시스템에 심층학습 모델 적용 124
• 4.3.1 URL 스크랩핑(Scraping) 124
• 4.3.2 심층학습 모델의 서빙(Serving) API 구현 및 서비스 적용 126
• 4.3.3 분석 데이터 기반 웹사이트 자동 생성 131
• 4.3.4 완성된 심층학습 모델 기반 웹사이트 자동 생성 시스템 135
• 5 장. 사용성 평가 136
• 5.1 사용성 평가를 위한 설문 설계 136
• 5.1.1 설문의 개요 136
• 5.1.2 설문의 목적 137
• 5.1.3 설문 문항 설계 138
• 5.2 설문 조사 145
• 5.2.1 1 차 설문조사 145
• 5.2.2 1 차 설문조사의 개선점 의견 146
• 5.2.3 2 차 설문조사 148
• 5.3 설문결과 149
• 5.3.1 요인의 타당성과 신뢰도 분석 149
• 5.3.2 1 차 설문 결과와 2 차 설문 결과에 대한 비교 153
• 6 장. 결론 157
• 6.1 연구의 요약 및 시사점 157
• 6.2 연구의 한계 및 향후 연구 과제 160
• 참고문헌 162
• 기호 설명 171
• ABSTRACT 179
• 감사의 글 184