KR20240036911A - 페이지에 대한 리포트를 제공하는 방법 및 장치 - Google Patents

Abstract

전자 장치에서 페이지에 대한 리포트를 제공하는 방법이 개시된다. 구체적으로, 페이지에 대한 리포트를 제공하는 방법은 타겟 페이지를 확인하는 단계; 베이스 환경 및 테스트 환경을 확인하는 단계; 페이지 간 비교에 대한 설정 정보에 기반하여, 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지를 확인하는 단계; 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지에 포함되는 에러 중 적어도 하나에 대한 테스트를 수행하는 단계; 및 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공하는 단계를 포함할 수 있다.

Description

페이지에 대한 리포트를 제공하는 방법 및 장치{METHOD AND APPARTUS FOR PROVIDING A REPORT ABOUT PAGE}

본 명세서의 실시 예는 페이지에 대한 리포트를 제공하는 방법 및 장치에 관한 것이다. 본 명세서의 실시 예는 베이스 환경 및 테스트 환경에서의 페이지 간의 차이 및 각 페이지에 포함되는 에러에 대한 테스트를 수행함으로써, 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공하는 방법 및 이에 대한 장치에 관한 것이다.

테스트 중인 서비스를 런칭하기 전에, 온라인 마케팅 등 인터넷 환경에서 서비스 중인 페이지와 테스트 중인 페이지를 비교하는 것이 필요할 수 있다. 다만, 서비스 중인 페이지와 테스트 중인 페이지 간의 차이 및 페이지를 실행함에 따라 발생하는 에러를 수동으로 확인하는데 일정 이상의 시간이 소요될 수 있고, 이에 따라 테스트의 런칭에 과도한 시간이 소요될 우려가 있었다. 따라서, 이와 같은 문제를 해결하기 위한 방법 및 장치가 요구된다.

본 개시는 상술한 문제점을 해결하기 위해 제안된 것으로, 페이지에 대한 리포트를 제공하는 방법 및 이를 장치를 제공하는데 있다.

보다 구체적으로 본 개시는 베이스 환경 및 테스트 환경에서의 페이지 간의 차이 및 각 페이지에 포함되는 에러에 대한 테스트를 수행함으로써, 페이지 간의 이미지, 텍스트 차이 또는 페이지의 실행 과정에서 발생한 에러를 포함하는 결과 정보를 포함하는 리포트를 제공하는 방법 및 장치를 제공하는 것을 목적으로 한다.

본 실시 예가 이루고자 하는 기술적 과제는 상기된 바와 같은 기술적 과제들로 한정되지 않으며, 이하의 실시 예들로부터 또 다른 기술적 과제들이 유추될 수 있다.

상술한 과제를 달성하기 위한 기술적 수단으로서, 본 개시의 제1측면에 따른 전자 장치에서 페이지에 대한 리포트를 제공하는 방법은 타겟 페이지를 확인하는 단계; 베이스 환경 및 테스트 환경을 확인하는 단계; 페이지 간 비교에 대한 설정 정보에 기반하여, 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지를 확인하는 단계; 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지에 포함되는 에러 중 적어도 하나에 대한 테스트를 수행하는 단계; 및 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공하는 단계를 포함할 수 있다.

일 실시 예에 따르면, 베이스 환경 및 테스트 환경을 확인하는 단계는 배치를 통해 수집된 베이스 환경에 대한 트래픽 데이터에 기반하여, 베이스 환경을 확인하는 단계; 및 온라인으로 수집된 테스트 환경에 대한 트래픽 데이터에 기반하여, 테스트 환경을 확인하는 단계를 포함할 수 있다.

일 실시 예에 따르면, 베이스 환경을 확인하는 단계는 수집된 베이스 환경에 대한 트래픽 데이터에 대응되는 방문 횟수에 기반하여, 방문 횟수가 설정된 임계치 이상인 베이스 환경을 확인하는 단계를 포함할 수 있다.

일 실시 예에 따르면, 설정 정보는 페이지에 포함되는 요소 중 제1 요소를 페이지 간 비교에서 제외하는 정보 및 페이지에 포함되는 요소 중 제2 요소를 페이지 간 비교에 포함하는 정보 중 적어도 하나를 포함하는 것을 특징으로 할 수 있다.

일 실시 예에 따르면, 제1 페이지 및 제2 페이지는 제1 요소를 미포함하고, 제2 요소를 포함하는 페이지인 것을 특징으로 할 수 있다.

일 실시 예에 따르면, 테스트를 수행하는 단계는 테스트에 대한 테스트 설정 정보에 기반하여, 제1 페이지 및 제2 페이지에 대한 A/B 테스트를 수행하는 단계를 포함할 수 있다.

일 실시 예에 따르면, 제1 페이지 및 제2 페이지를 확인하는 단계는 제1 스레드 및 제2 스레드를 이용하여 병렬적으로 제1 페이지 및 제2 페이지를 확인하는 단계를 포함하고, 테스트를 수행하는 단계는 메인 스레드를 통해 제1 페이지 및 제2 페이지의 차이에 대한 테스트를 수행하는 단계를 포함할 수 있다.

일 실시 예에 따르면, 리포트를 제공하는 단계는 제1 페이지 및 제2 페이지의 차이를 슬라이드 아이콘을 통해 나타내는 비교 이미지를 포함하는 리포트를 제공하는 단계를 포함할 수 있다.

일 실시 예에 따르면, 리포트를 제공하는 단계는 제1 페이지 및 제2 페이지의 차이에 기반하여, 제2 페이지에 포함되는 요소 중 대응되는 제1 페이지의 요소와 상이한 제1 요소를 확인하는 단계; 및 제1 요소가 표시된 제2 페이지를 포함하는 리포트를 제공하는 단계를 포함할 수 있다.

일 실시 예에 따르면, 리포트를 제공하는 단계는 제2 페이지에 대응되는 제2 소스 코드 중 제1 페이지에 대응하는 제1 소스 코드와 상이한 소스 코드인 제3 소스 코드를 확인하는 단계; 및 제3 소스 코드가 표시된 제2 소스 코드를 포함하는 리포트를 제공하는 단계를 포함할 수 있다.

일 실시 예에 따르면, 에러는 제1 페이지에 대응하는 제1 콘솔 에러, 제2 페이지에 대응하는 제2 콘솔 에러, 페이지에 포함되는 리소스에 대한 로드 에러 중 적어도 하나를 포함하는 것을 특징으로 할 수 있다.

일 실시 예에 따르면, 제1 페이지 및 제2 페이지의 차이는 페이지 간의 이미지, 텍스트 및 리소스의 차이 중 적어도 하나를 포함하는 것을 특징으로 할 수 있다.

본 개시의 제2측면에 따른 페이지에 대한 리포트를 제공하기 위한 전자 장치 트랜시버; 하나 이상의 명령어를 저장하는 스토리지; 및 타겟 페이지를 확인하고, 베이스 환경 및 테스트 환경을 확인하고, 페이지 간 비교에 대한 설정 정보에 기반하여, 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지를 확인하고, 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지에 포함되는 에러 중 적어도 하나에 대한 테스트를 수행하고, 및 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공하는 프로세서를 포함할 수 있다.

본 개시의 제3측면에 따른 기록매체는 컴퓨터에서 실행시키기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 비일시적 기록매체일 수 있다.

본 명세서의 실시 예에 따르면, 전자 장치는 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지를 확인하고, 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지의 실행에 따른 에러 중 적어도 하나에 대한 테스트를 실행할 수 있다. 전자 장치(100)는 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공할 수 있다. 이에 따라, 전자 장치(100)는 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지의 실행에 따른 에러를 검출함으로써, 테스트의 수행에 따른 결과 정보에 대한 리포트를 자동으로 제공할 수 있다. 이에 따라, 사용자는 테스트의 결과를 빠르게 확인하고, 테스트의 결과에 따라 테스트의 런칭 여부를 빠르게 결정할 수 있다.

발명의 효과는 이상에서 언급한 효과로 제한되지 않으며, 언급되지 않은 또 다른 효과들은 청구범위의 기재로부터 당해 기술 분야의 통상의 기술자에게 명확하게 이해될 수 있을 것이다.

도 1은 다양한 실시 예에 따른 전자 장치가 페이지에 대한 리포트를 제공하는 방법이 구현될 수 있는 시스템을 설명하기 위한 도면이다.
도 2는 전자 장치가 페이지를 제공하는 방법을 나타낸 흐름도이다.
도 3은 전자 장치가 장치에서 페이지에 대한 리포트를 제공하는 실시 예를 설명하기 위한 도면이다.
도 4는 페이지에 대한 리포트를 제공하기 위한 시스템을 설명하기 위한 도면이다.
도 5는 트래픽 데이터를 처리하는 프로세스를 설명하기 위한 도면이다.
도 6은 테스트 환경의 URL을 설정하는 페이지를 설명하기 위한 도면이다.
도 7은 페이지 간 비교에 대한 설정 정보를 편집하는 페이지를 설명하기 위한 도면이다.
도 8은 테스트 환경의 URL을 설정하고, 저장하는 페이지를 설명하기 위한 도면이다.
도 9는 도 8에 이어, 테스트의 실행을 관리하는 페이지를 설명하기 위한 도면이다.
도 10은 테스트를 설정하는 상세 페이지를 설명하기 위한 도면이다.
도 11은 트래픽 데이터에 대한 페이지를 설명하기 위한 도면이다.
도 12는 도 11에 이어, 트래픽 데이터에 대한 페이지를 설명하기 위한 도면이다.
도 13은 테스트의 수행에 따른 결과에 대한 페이지를 설명하기 위한 도면이다.
도 14는 테스트의 수행에 따른 결과 정보를 포함하는 페이지를 설명하기 위한 도면이다.
도 15는 제1 페이지 및 제2 페이지의 차이를 비교하기 위한 비교 이미지를 설명하기 위한 도면이다.
도 16은 제1 이미지 및 제2 이미지를 설명하기 위한 도면이다.
도 17은 테스트의 수행에 따른 결과 정보인 Diff Result를 설명하기 위한 도면이다.
도 18은 테스트의 수행에 따른 결과 정보인 Diff Result를 설명하기 위한 도면이다.
도 19는 테스트의 수행에 따른 Html 리포트를 설명하기 위한 도면이다.
도 20은 일 실시 예에 따른 페이지에 대한 리포트를 제공하기 위한 전자 장치를 도식화한 블록도이다.

실시 예들에서 사용되는 용어는 본 개시에서의 기능을 고려하면서 가능한 현재 널리 사용되는 일반적인 용어들을 선택하였으나, 이는 당 분야에 종사하는 기술자의 의도 또는 판례, 새로운 기술의 출현 등에 따라 달라질 수 있다. 또한, 특정한 경우는 출원인이 임의로 선정한 용어도 있으며, 이 경우 해당되는 설명 부분에서 상세히 그 의미를 기재할 것이다. 따라서 본 개시에서 사용되는 용어는 단순한 용어의 명칭이 아닌, 그 용어가 가지는 의미와 본 개시의 전반에 걸친 내용을 토대로 정의되어야 한다.

명세서 전체에서 어떤 부분이 어떤 구성요소를 “포함”한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있음을 의미한다. 또한, 명세서에 기재된 “...부”, “...모듈” 등의 용어는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 이는 하드웨어 또는 소프트웨어로 구현되거나 하드웨어와 소프트웨어의 결합으로 구현될 수 있다.

명세서 전체에서 기재된 “a, b, 및 c 중 적어도 하나”의 표현은, ‘a 단독’, ‘b 단독’, ‘c 단독’, ‘a 및 b’, ‘a 및 c’, ‘b 및 c’, 또는 ‘a,b,c 모두’를 포괄할 수 있다.

이하에서 언급되는 "단말"은 네트워크를 통해 서버나 타 단말에 접속할 수 있는 컴퓨터나 휴대용 단말로 구현될 수 있다. 여기서, 컴퓨터는 예를 들어, 웹 브라우저(WEB Browser)가 탑재된 노트북, 데스크톱(desktop), 랩톱(laptop) 등을 포함하고, 휴대용 단말은 예를 들어, 휴대성과 이동성이 보장되는 무선 통신 장치로서, IMT(International Mobile Telecommunication), CDMA(Code Division Multiple Access), W-CDMA(W-Code Division Multiple Access), LTE(Long Term Evolution) 등의 통신 기반 단말, 스마트폰, 태블릿 PC 등과 같은 모든 종류의 핸드헬드(Handheld) 기반의 무선 통신 장치를 포함할 수 있다.

아래에서는 첨부한 도면을 참고하여 본 개시의 실시 예에 대하여 본 개시가 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 상세히 설명한다. 그러나 본 개시는 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시 예에 한정되지 않는다.

이하, 본 발명의 실시 예를 첨부된 도면을 참조하여 상세하게 설명한다.

실시 예를 설명함에 있어서 본 발명이 속하는 기술 분야에 익히 알려져 있고 본 발명과 직접적으로 관련이 없는 기술 내용에 대해서는 설명을 생략한다. 이는 불필요한 설명을 생략함으로써 본 발명의 요지를 흐리지 않고 더욱 명확히 전달하기 위함이다.

마찬가지 이유로 첨부 도면에 있어서 일부 구성요소는 과장되거나 생략되거나 개략적으로 도시되었다. 또한, 각 구성요소의 크기는 실제 크기를 전적으로 반영하는 것이 아니다. 각 도면에서 동일한 또는 대응하는 구성요소에는 동일한 참조 번호를 부여하였다.

본 발명의 이점 및 특징, 그리고 그것들을 달성하는 방법은 첨부되는 도면과 함께 상세하게 후술되어 있는 실시 예들을 참조하면 명확해질 것이다. 그러나 본 발명은 이하에서 개시되는 실시 예들에 한정되는 것이 아니라 서로 다른 다양한 형태로 구현될 수 있으며, 단지 본 실시 예들은 본 발명의 개시가 완전하도록 하고, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 발명의 범주를 완전하게 알려주기 위해 제공되는 것이며, 본 발명은 청구항의 범주에 의해 정의될 뿐이다. 명세서 전체에 걸쳐 동일 참조 부호는 동일 구성 요소를 지칭한다.

이 때, 처리 흐름도 도면들의 각 블록과 흐름도 도면들의 조합들은 컴퓨터 프로그램 인스트럭션들에 의해 수행될 수 있음을 이해할 수 있을 것이다. 이들 컴퓨터 프로그램 인스트럭션들은 범용 컴퓨터, 특수용 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비의 프로세서에 탑재될 수 있으므로, 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비의 프로세서를 통해 수행되는 그 인스트럭션들이 흐름도 블록(들)에서 설명된 기능들을 수행하는 수단을 생성하게 된다. 이들 컴퓨터 프로그램 인스트럭션들은 특정 방식으로 기능을 구현하기 위해 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비를 지향할 수 있는 컴퓨터 이용 가능 또는 컴퓨터 판독 가능 메모리에 저장되는 것도 가능하므로, 그 컴퓨터 이용가능 또는 컴퓨터 판독 가능 메모리에 저장된 인스트럭션들은 흐름도 블록(들)에서 설명된 기능을 수행하는 인스트럭션 수단을 내포하는 제조 품목을 생산하는 것도 가능하다. 컴퓨터 프로그램 인스트럭션들은 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비 상에 탑재되는 것도 가능하므로, 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비 상에서 일련의 동작 단계들이 수행되어 컴퓨터로 실행되는 프로세스를 생성해서 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비를 수행하는 인스트럭션들은 흐름도 블록(들)에서 설명된 기능들을 실행하기 위한 단계들을 제공하는 것도 가능하다.

또한, 각 블록은 특정된 논리적 기능(들)을 실행하기 위한 하나 이상의 실행 가능한 인스트럭션들을 포함하는 모듈, 세그먼트 또는 코드의 일부를 나타낼 수 있다. 또, 몇 가지 대체 실행 예들에서는 블록들에서 언급된 기능들이 순서를 벗어나서 발생하는 것도 가능함을 주목해야 한다. 예컨대, 잇달아 도시되어 있는 두 개의 블록들은 사실 실질적으로 동시에 수행되는 것도 가능하고 또는 그 블록들이 때때로 해당하는 기능에 따라 역순으로 수행되는 것도 가능하다.

도 1은 다양한 실시 예에 따른 전자 장치가 페이지에 대한 리포트를 제공하는 방법이 구현될 수 있는 시스템을 설명하기 위한 도면이다.

도 1을 참조하면, 다양한 실시 예에 따른 시스템(10)은 다양한 종류의 장치들에 의해 구현될 수 있다. 예를 들어, 시스템(10)은 전자 장치(100) 및 서버(110)를 포함할 수 있다. 도1에 도시된 시스템(10)은 본 실시 예와 관련된 구성요소들만 도시되어 있다. 따라서, 도 1에 도시된 구성요소들 외에 다른 범용적인 구성요소들이 더 포함될 수 있음을 본 실시 예와 관련된 기술분야에서 통상의 지식을 가진 자라면 이해할 수 있다.

전자 장치(100) 및 서버(110) 각각은 트랜시버, 스토리지 및 프로세서를 포함할 수 있다. 또한, 전자 장치(100) 및 서버(110) 각각은 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 이는 하드웨어나 소프트웨어, 또는, 하드웨어 및 소프트웨어의 결합으로 구현될 수 있다. 한편 실시 예 전반에서 전자 장치(100) 및 서버(110) 각각은 분리된 장치 또는 서버로 언급되나 이는 논리적으로 나누어진 구조일 수 있으며, 이들 중 적어도 일부가 하나의 장치 또는 서버에서 분리된 기능에 의해 구현될 수 있다.

일 실시 예에 따르면, 전자 장치(100) 및 서버(110)는 네트워크 서버로 구현되는 다수의 컴퓨터 시스템 또는 컴퓨터 소프트웨어를 포함할 수 있다. 예를 들면 전자 장치(100) 및 서버(110) 중 적어도 일부는 인트라넷 또는 인터넷과 같은 컴퓨터 네트워크를 통해 다른 네트워크 서버와 통신할 수 있는 하위 장치와 연결되어 작업 수행 요청을 접수하고, 그에 대한 작업을 수행하여 수행 결과를 제공하는 컴퓨터 시스템 및 컴퓨터 소프트웨어를 지칭할 수 있다. 이외에도, 전자 장치(100) 및 서버(110) 중 적어도 일부는 네트워크 서버 상에서 동작할 수 있는 일련의 응용 프로그램과, 내부 혹은 연결된 다른 노드에 구축되어 있는 각종 데이터베이스를 포함하는 광의의 개념으로 이해될 수 있다. 예컨대, 전자 장치(100) 및 서버(110) 중 적어도 일부는 도스(DOS), 윈도우(Windows), 리눅스(Linux), 유닉스(UNIX), 또는 맥OS(MacOS) 등의 운영 체제에 따라 다양하게 제공되는 네트워크 서버 프로그램을 이용하여 구현될 수 있다.

전자 장치(100) 및 서버(110)는 네트워크(미도시)를 통해서 서로 통신할 수 있다. 네트워크는 근거리 통신망(Local Area Network; LAN), 광역 통신망(Wide Area Network; WAN), 부가가치 통신망(Value Added Network; VAN), 이동 통신망(mobile radio communication network), 위성 통신망 및 이들의 상호 조합을 포함하며, 도 1에 도시된 각 네트워크 구성 주체가 서로 원활하게 통신을 할 수 있도록 하는 포괄적인 의미의 데이터 통신망이며, 유선 인터넷, 무선 인터넷 및 모바일 무선 통신망을 포함할 수 있다. 무선 통신은 예를 들어, 무선 랜(Wi-Fi), 블루투스, 블루투스 저 에너지(Bluetooth low energy), 지그비, WFD(Wi-Fi Direct), UWB(ultra wideband), 적외선 통신(IrDA, infrared Data Association), NFC(Near Field Communication) 등이 있을 수 있으나, 이에 한정되는 것은 아니다.

일 실시 예에 따르면, 전자 장치(100)는 타겟 페이지를 확인하고, 베이스 환경 및 테스트 환경을 확인하고, 페이지 간 비교에 대한 설정 정보에 기반하여, 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지를 확인하고, 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지에 포함되는 에러 중 적어도 하나에 대한 테스트를 수행하고, 및 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공할 수 있다. 여기서, 서버(110)는 전술한 실시 예를 수행하기 위한 정보를 베이스 환경 및 테스트 환경에 대한 트래픽 데이터 등을 전자 장치(100)에 제공할 수 있다.

현재 서비스 중인 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지는 텍스트, 이미지 및 리소스 등에 있어 일부 차이가 있을 수 있다. 이때, 전자 장치(100)가 제1 페이지와 제 2페이지 간의 유저 인터페이스 측면에서의 차이 및 제1 페이지와 제2 페이지의 실행에 따른 에러를 제공함에 따라, 사용자는 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지의 실행에 따른 에러를 빠르게 확인할 수 있다. 또한, 전자 장치(100)는 베이스 환경, 테스트 환경을 설정하고, 페이지 간의 차이 또는 페이지의 실행에 따른 에러를 검출하기 위한 테스트를 용이하게 수행할 수 있도록 하는 플랫폼을 제공할 수 있다. 이에 따라, 사용자는 플랫폼을 통해 테스트를 용이하게 수행할 수 있고, 사용자는 테스트에 따른 결과 정보를 포함하는 리포트를 확인하여 베이스 환경에 대응하는 제1 페이지 및 테스트 환경에 대응하는 제2 페이지의 퍼포먼스를 용이하게 비교할 수 있다. 이에 대한 구체적인 실시 예는 하기에서 자세히 살펴보기로 한다.

도 2는 전자 장치가 페이지에 대한 리포트를 제공하는 방법을 나타낸 흐름도이다.

도 2를 참조하면, 전자 장치(100)가 페이지를 제공하는 각 동작은 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 명확하게 이해되는 범위 내에서 일부 동작이 변경, 치환되거나 동작 간의 일부 순서가 변경될 수 있음은 자명하게 이해될 수 있다.

단계 S210에서, 전자 장치(100)는 타겟 페이지를 확인할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 사용자의 요청에 대응하는 타겟 페이지를 확인할 수 있다. 보다 상세하게는, 사용자가 유저 인터페이스를 통해 URL 정보를 입력함에 따라, 전자 장치(100)는 입력된 URL 정보를 테스트의 대상이 되는 타겟 페이지의 URL 정보를 확인할 수 있다. 여기서, 타겟 페이지는 GW, SDP 등의 페이지일 수 있으나, 이에 한정되는 것은 아니다.

단계 S220에서, 전자 장치(100)는 베이스 환경 및 테스트 환경을 확인할 수 있다.

일 실시 예에 따르면, 전자 장치(100)가 베이스 환경 및 테스트 환경을 확인할 수 있다. 사용자는 테스트의 기준이 되는 베이스 환경 및 테스트의 대상이 되는 테스트 환경을 결정할 수 있고, 전자 장치(100)는 타겟 페이지의 베이스 환경 및 타겟 페이지의 테스트 환경을 확인할 수 있다. 본원에서, 베이스 환경은 테스트의 기준이 되는 환경일 수 있고, 테스트 환경은 테스트의 대상이 되는 환경일 수 있다. 보다 상세하게는, 베이스 환경은 현재 서비스 중인 프로덕션 환경일 수 있고, 테스트 환경은 QA 팀에 의해 개발되어 테스트 중인 환경일 수 으나, 이에 한정되는 것은 아니다.

일 실시 예에 따르면, 전자 장치(100)는 배치를 통해 수집된 베이스 환경에 대한 트래픽 데이터에 기반하여 베이스 환경을 확인하고, 온라인으로 수집된 테스트 환경에 대한 트래픽 데이터에 기반하여 테스트 환경을 확인할 수 있다. 보다 상세하게는, 전자 장치(100)는 베이스 환경에 대한 트래픽 데이터에 대응되는 방문 횟수에 기반하여, 방문 횟수가 설정된 임계치 이상인 베이스 환경을 확인할 수 있다. 베이스 환경 및 테스트 환경을 확인하는 구체적인 동작은 하기에서 자세히 살펴보기로 한다.

단계 S230에서, 전자 장치(100)는 페이지 간 비교에 대한 설정 정보에 기반하여, 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지를 확인할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 멀티 스레드를 통해 복수 개의 페이지를 병렬적으로 확인할 수 있다. 예를 들어, 전자 장치(100)는 제1 스레드를 이용하여 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지를 확인할 수 있고, 제2 스레드를 이용하여 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지를 확인할 수 있다. 여기서, 페이지를 확인하는 동작은 각 환경에서의 타겟 페이지의 URL에 기반하여, 페이지 소스를 파싱하는 동작을 포함할 수 있다. 또한, 페이지를 확인하는 동작은 설정 정보에 기반하여, 페이지 소스를 파싱함에 따라 확인된 페이지의 일부만을 비교의 기준 또는 대상이 되는 페이지로 확인할 수 있다.

여기서, 설정 정보는 페이지에 포함되는 요소 중 일부 요소(또는, 제1 요소로 호칭될 수 있다.)를 페이지 간 비교에서 제외하는 정보 또는 페이지에 포함되는 요소 중 다른 일부 요소(또는, 제2 요소로 호칭될 수 있다.)를 페이지 간 비교에 포함하는 정보 중 적어도 하나를 포함하는 것을 특징으로 할 수 있다. 여기서, 설정 정보는 DIFF RULE로 호칭될 수 있고, 페이지에 포함되는 요소 중 일부 요소를 페이지 간 비교에서 제외하는 정보는 EXCLUDE RULE로 호칭될 수 있고, 페이지에 포함되는 요소 중 다른 일부 요소를 페이지 간 비교에 포함하는 정보는 ONLY COMPARE RULE로 호칭될 수 있으나, 이에 한정되는 것은 아니다. 이에 따라, 제1 페이지 및 제2 페이지를 포함하는 페이지는 제1 요소를 미포함하고, 제2 요소를 포함하는 페이지일 수 있다. 제1 페이지 및 제2 페이지를 확인하는 구체적인 동작은 하기에서 자세히 살펴보기로 한다.

단계 S240에서, 전자 장치(100)는 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지에 포함되는 에러 중 적어도 하나에 대한 테스트를 수행할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 제1 페이지 및 제2 페이지의 차이에 대한 테스트를 수행할 수 있다. 예를 들어, 제1 스레드 및 제2 스레드를 통해 제1 페이지 및 제2 페이지를 확인함에 따라, 전자 장치(100)는 메인 스레드를 통해 제1 페이지 및 제2 페이지의 차이를 확인할 수 있다. 제1 페이지 및 제2 페이지의 차이는 유저 인터페이스 측면에서 페이지에 포함되는 요소의 차이일 수 있다. 예를 들어, 제1 페이지 및 제2 페이지의 차이는 텍스트, 이미지, 리소스 URL 등의 차이를 포함할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 제1 페이지 및 제2 페이지에 포함되는 에러에 대한 테스트를 수행할 수 있다. 여기서, 에러는 제1 페이지 및 제2 페이지를 실행하는 과정에서 발생하는 에러일 수 있다. 에러는 제1 페이지에 대응하는 제1 콘솔 에러, 제2 페이지에 대응하는 제2 콘솔 에러 및 제1 페이지와 제2 페이지에 포함되는 리소스에 대한 로드 에러 중 적어도 하나를 포함할 수 있다. 또한, 에러는 JS(Java Script) 에러, CSS(Cascading Style Sheets) 에러 등을 포함할 수 있다.

단계 S250에서, 전자 장치(100)는 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 테스트의 수행에 따른 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지에 포함되는 에러를 포함하는 리포트를 제공할 수 있다. 이에 따라, 사용자는 제1 페이지와 제2 페이지의 차이 및 에러를 용이하게 확인할 수 있고, 베이스 환경에 대응하는 제1 페이지 및 테스트 환경에 대응하는 제2 페이지의 퍼포먼스를 용이하게 비교할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 제1 페이지 및 제2 페이지의 차이를 슬라이드 아이콘을 통해 나타내는 비교 이미지를 포함하는 리포트를 제공할 수 있다. 이에 따라, 사용자는 슬라이드 아이콘을 통해 제1 페이지 및 제2 페이지의 대응되는 요소의 차이를 용이하게 확인할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 제1 페이지 및 제2 페이지의 차이에 기반하여, 제2 페이지에 포함되는 요소 중 제1 페이지의 요소와 상이한 제1 요소를 확인할 수 있고, 제1 요소가 표시된 제2 페이지를 포함하는 리포트를 제공할 수 있다. 사용자는 제1 요소가 표시된 제2 페이지를 확인함에 따라, 제1 페이지와 제2 페이지의 차이가 있는 요소를 용이하게 파악할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 제1 페이지 및 제2 페이지와 대응하는 제1 소스 코드 및 제2 소스 코드를 확인할 수 있다. 이때, 전자 장치(100)는 제2 소스 코드 중 제1 소스 코드와 상이한 소스 코드인 제 3 소스 코드를 확인할 수 있다. 이에 따라, 전자 장치(100)는 제3 소스 코드를 제2 소스 코드에 표시하여 리포트를 제공할 수 있다.

도 3은 페이지에 대한 리포트를 제공하기 위한 전자 장치를 설명하기 위한 도면이다.

도 3을 참조하면, UI Diff Architecture(300)는 페이지 간의 차이 및 페이지에 포함되는 에러를 확인하기 위한 시스템의 아키텍처일 수 있다. UI Diff Architecture(300)는 UI Diff(310), Distribute Execution(320), Backend(330), Frontend(340) 및 Data Storage(350)를 포함할 수 있다.

UI Diff(310)는 페이지 간 차이에 대한 테스트에 이용될 수 있는 Library를 포함할 수 있다. Library는 도면에 Lib으로 표시될 수도 있다. 1) Object Operation Lib(301)은 페이지가 엔트리 포인트 등을 통해 새로운 페이지를 제공하는 형태의 페이지일 때, 새로운 페이지에 포함되는 요소도 노출하는 기능을 포함할 수 있다. 2) Browser Operation Lib(302)는 브라우저를 통해 Operation을 실행하는 기능을 수행하기 위한 라이브러리일 수 있다. 3) Error Handle(303)는 브라우저를 통해 Operation을 실행할 때, 에러 발생을 해결하기 위한 라이브러리일 수 있다. 4) Console Monitor(304)는 페이지 실행 과정에 발생하는 콘솔 에러를 제공하기 위한 라이브러리일 수 있다. 보다 상세하게는, Core Monitor(304)에 의해 테스트 환경에 대응하는 페이지의 실행 과정에 콘솔 에러가 있으면, 전자 장치(100)는 콘솔 에러를 표시하여 제공할 수 있다. 5) Compare Core(305)는 베이스 환경에서의 제1 페이지 및 테스트 환경에서의 제2 페이지의 차이점을 확인하기 위한 라이브러리일 수 있다. 보다 상세하게는, Compare Core(305)는 페이지 간 비교에 대한 설정 정보에 기반하여, 제1 페이지 및 제2 페이지의 차이점을 확인할 수 있다. 또한, Compare Core(305)는 자동 디노이즈 프로세스에 기반하여, 페이지 간 차이가 있는 요소를 확인할 수 있다. 이때, 페이지 간 차이가 있는 요소는 캐시 데이터로 저장될 수 있다. 6) Diff Rule Phase(306)는 페이지 간 비교에 대한 설정 정보를 설정, 변경하기 위한 라이브러리일 수 있다. 7) Step Phase(307)는 Object Operation Lib(301)에 의해 수행되는 기능을 분석하기 위한 라이브러리일 수 있다. 8) URL Load Monitor(308)는 URL 로딩에 대응하여 JS, CSS를 모니터링하기 위한 라이브러리일 수 있다.

또한, UI Diff(310)는 Selenium(311), Appium, Pytest, Config Phaser(312) 및 Excel Phaser(313)을 포함할 수 있다. 1) Selenium(311)은 테스트의 수행에 따른 결과 정보를 생성할 수 있다. 보다 상세하게는, Selenium(311)은 비교 이미지 또는 제2 이미지에 차이가 나는 요소를 표시하는데 이용될 수 있다. 2) Config Phaser(312)는 테스트를 수행하기에 필요한 정보를 입력하기 위한 페이지를 제공할 수 있다. 3) Excel Phaser(313)는 테스트 데이터를 저장하고 분석하기 위한 페이지를 제공할 수 있다.

Distribute Execution(320)은 UI Diff(310)에 포함되는 라이브러리를 AutoRunner를 통해 Backend에 제공할 수 있다.

Backend(330)는 파이선으로 작성된 오픈 소스 웹 프레임 워크인 Django, Rest-framework, jwt, SDK 및 Traffic Data Collect를 포함할 수 있다.

Frontend(340)는 Web/H5 Diff, Android Diff, ios Diff 뿐만 아니라 Run config 및 Project scenario 를 포함하는 Component를 포함할 수 있다. 또한, Frontend(340)는 VUE, Elememt-UI, JS/CSS(Scss), VUEX, axios 및 img-comparision-slider일 수 있다. img-comparision-slider는 페이지 간의 비교 이미지를 제공할 수 있다.

Data Storage(350)는 Mysql, Mongo DB, redis 및 File system을 포함할 수 있다. Mysql은 타겟 페이지의 URL 정보를 저장할 수 있다. 보다 상세하게는, Mysql은 테스트 환경에서의 타겟 페이지의 URL 정보를 확인할 수 있다. Redis는 테스트 실행에 따른 상태 정보 및 실시간으로 생성되는 리포트를 임시적으로 저장할 수 있다. 또한, File system은 테스트 실행에 따라 생성된 이미지 파일 및 HTML 리포트를 저장할 수 있다.

도 4는 페이지에 대한 리포트를 제공하기 위한 시스템을 설명하기 위한 도면이다.

도 4를 참조하면, 시스템(400)은 본원의 실시 예를 수행하기 위한 시스템으로, UI DIFF TOOL(410) 및 Web Diff Framework(420)을 포함할 수 있다.

단계 S411에서, 사용자는 Diff URL 및 Diff Function을 설정할 수 있다. 여기서, Diff URL은 타겟 페이지에 대응될 수 있다. 또한, Diff Function은 도 3의 UI Diff(310)에 포함되는 라이브러리 함수에 대응할 수 있다. 즉, 사용자는 테스트의 실행 전에 타겟 페이지 및 테스트에 이용될 수 있는 라이브러리 함수의 설정 값을 결정할 수 있다.

단계 S412에서, 사용자는 Perm 트래픽 데이터 및 Product 트래픽 데이터를 설정할 수 있다. 전자 장치(100)는 배치를 통해 수집된 베이스 환경에 대한 트래픽 데이터에 기반하여, 베이스 환경을 확인할 수 있다. 여기서, 베이스 환경에 대한 트래픽 데이터는 Product 트래픽 데이터로, 배치를 통해 설정된 기간 동안 수집된 트래픽 데이터일 수 있다. 또한, 전자 장치(100)는 온라인으로 수집된 테스트 환경에 대한 트래픽 데이터에 기반하여, 테스트 환경을 확인할 수 있다. 여기서, 테스트 환경에 대한 트래픽 데이터는 QA 팀 등 사용자의 테스트에 이용된 트래픽 데이터일 수 있다.

단계 S413에서, 사용자는 Diff Rule을 설정할 수 있다. 본원에서, Diff Rule은 페이지 간 비교를 위한 테스트를 수행할 때, 페이지에서 비교의 대상이 되는 요소 또는 비교의 대상에서 제외되는 요소를 설정하기 위한 설정 정보에 대응할 수 있다.

단계 S414에서, 사용자는 페이지 간 차이 또는 에러 중 적어도 하나에 대한 테스트를 수행하기 위한 정보를 설정할 수 있다. 예를 들어, 사용자는 전자 장치(100)로부터 제공되는 페이지(여기서, 페이지는 유저 인터페이스로 호칭될 수 있다.)를 통해 테스트의 기준이 되는 베이스 환경, 테스트 환경 등을 설정할 수 있다.

단계 S415에서, 전자 장치(100)는 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지의 실행 과정에서 발생하는 에러에 대한 정보를 포함하는 결과 정보를 포함하는 리포트를 제공할 수 있다. 보다 상세하게는, 전자 장치(100)는 Web Diff Framework(420)를 통해 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지의 실행 과정에서 발생하는 에러에 대한 정보를 포함하는 결과 정보를 포함하는 리포트를 제공할 수 있다. 도 4에서는 Web UI Diff에 대해 기술하고 있으나, 이에 한정되는 것은 아니고, 본원의 실시 예는 모바일 등의 장치에서의 UI Diff에도 유사하게 적용될 수 있다.

단계 S421 및 단계 S422에서, 전자 장치(100)는 개별 스레드를 통해 각 환경에서의 타겟 페이지에 대응하는 페이지를 확인할 수 있다. 예를 들어, 전자 장치(100)는 제1 스레드를 통해 프로덕션 환경에서의 타겟 페이지에 대응하는 제1 페이지를 확인하고, 제2 스레드를 통해 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지를 확인할 수 있다. 또한, 페이지를 확인하는 동작은 타겟 페이지의 URL 정보, 타겟 페이지에 대응하는 환경의 IP 정보 등에 기반하여 페이지 소스를 파싱하는 동작 및 설정 정보(또는, Diff Rule)에 기반하여, 파싱된 페이지 소스에 대응하는 페이지 중 일부를 제1 페이지(423) 또는 제2 페이지(424)로 확인하는 동작을 포함할 수 있다.

단계 S425에서, 전자 장치(100)는 메인 스레드를 통해 제1 페이지(423) 및 제2 페이지(424)의 리소스를 비교할 수 있다. 이때, 비교의 대상이 되는 각 페이지의 리소스는 텍스트, 이미지, 동영상뿐만 아니라 페이지에 포함될 수 있는 모든 요소를 포함할 수 있다. 또한, 전자 장치(100)는 리소스 비교에 따른 제1 페이지(423)와 제2 페이지(424)의 차이 및 제1 페이지(423)와 제2 페이지(424)에 포함되는 에러를 저장할 수 있다. 예를 들어, 전자 장치(100)는 페이지(423)와 제2 페이지(424)의 차이를 이미지로 저장하거나, 차이 및 에러를 레디스에 저장할 수 있고, 결과 정보를 포함하는 리포트를 HTML 파일로 저장할 수 있다.

단계 S430에서, 전자 장치(100)는 제1 페이지(423)와 제2 페이지(424)의 차이 및 제1 페이지(423)와 제2 페이지(424)에 대응하는 에러를 포함하는 리포트를 생성할 수 있다. 또한, 생성된 레포트는 업로드되거나 캐시로 전자 장치(100) 또는 프록시 서버에 저장될 수 있다.

도 5는 트래픽 데이터를 처리하는 프로세스를 설명하기 위한 도면이다.

도 5는 웹 환경에서의 페이지 간의 차이 및 페이지의 실행 과정에서의 에러를 테스트할 때, 웹 관련 트래픽 데이터를 처리하는 프로세스를 설명하기 도면이다. 다만, 본원의 트래픽 데이터는 웹 관련 트래픽 데이터에 한정되는 것은 아니다.

단계 S510에서, 전자 장치(100)는 HTML Response인지 여부에 기반하여, 온라인으로 수집된 테스트 환경에 대한 트래픽 데이터 중 일부를 필터링할 수 있다. 예를 들어, 전자 장치(100)는 HTML Response인지 여부에 기반하여, 온라인으로 수집된 테스트 환경에 대한 트래픽 데이터 중 웹 관련 트래픽 데이터를 필터링할 수 있다. 이에 따라, 전자 장치(100)는 Web UI Diff를 수행하기 위해 트래픽 데이터 중 일부를 필터링할 수 있다. 여기서, 온라인으로 수집된 테스트 환경에 대한 트래픽 데이터는 Perm 트래픽 데이터로 호칭될 수 있다.

단계 S520에서, 전자 장치(100)는 User Agent Match 여부에 기반하여, 배치를 통해 수집된 프로덕션 환경에 대한 트래픽 데이터 중 일부를 필터링할 수 있다. 이에 따라, 전자 장치(100)는 프로덕션 환경에 대한 트래픽 데이터 중 웹 관련 트래픽 데이터를 필터링할 수 있다.

단계 S530에서, 전자 장치(100)는 필터링된 트래픽 데이터 각각의 방문 횟수에 기반하여, 방문 횟수가 설정된 임계치 이상인 트래픽 데이터를 필터링할 수 있다. 이에 따라, 전자 장치(100)는 방대한 트래픽 데이터 중 방문 횟수가 설정된 임계치 이상인 웹 트래픽만을 필터링하여 제공할 수 있다. 즉, 전자 장치(100)는 베이스 환경에 대한 트래픽 데이터에 대응되는 방문 횟수에 기반하여, 방문 횟수가 설정된 임계치 이상인 베이스 환경을 확인할 수 있다. 또한, 전자 장치(100)는 테스트 환경에 대한 트래픽 데이터에 대응되는 방문 횟수에 기반하여, 방문 횟수가 설정된 임계치 이상인 테스트 환경을 확인할 수 있다.

단계 S540에서, 전자 장치(100)는 이번 테스트에 이용된 베이스 환경 및 테스트 환경에 대응하는 트래픽 데이터를 확인한 후, 이를 블랙 리스트에 추가할 수 있다. 예를 들어, 전자 장치(100)는 다양한 환경에서의 트래픽 데이터를 이용하기 위해, 테스트에 기 사용된 환경의 트래픽 데이터를 블랙 리스트에 추가하여 이후에 테스트에서 트래픽 데이터에서 필터링되도록 설정할 수 있다.

도 6은 테스트 환경의 URL을 설정하는 페이지를 설명하기 위한 도면이다.

도 6을 참조하면, 전자 장치(100)는 테스트 환경의 URL을 설정하는 페이지(600)를 사용자에게 제공할 수 있고, 사용자는 페이지(600)를 통해 테스트 환경의 URL에 대한 정보를 입력할 수 있다. 사용자는 페이지(600)의 영역(650)에 테스트하고자 하는 URL에 대한 정보를 입력함에 따라, 새로운 테스트 환경의 URL을 메뉴얼하게 설정할 수 있다. 페이지(600)는 Excel Phaser(313)을 통해 제공되는 페이지일 수 있다.

전자 장치(100)는 기 저장된 테스트 환경의 URL을 페이지(600)를 통해 제공할 수 있다. 예를 들어, Index 넘버 5애 해당하는 테스트 환경의 URL은 'http://cart.coupang.com/cartView.pang'(610)일 수 있고, 테스트 환경의 URL이 'http://cart.coupang.com/cartView.pang'(610)인 테스트 환경의 페이지 이름은 'pc cart page EN'일 수 있다. 또한, 테스트 환경의 URL이 'http://cart.coupang.com/cartView.pang'(610)인 테스트 환경의 언어는 'EN'이고, login 여부에 대한 정보는 'Y'일 수 있다. 또한, 사용자로부터 Operation에 대한 아이콘(660)을 통한 입력을 수신함에 따라, 전자 장치(100)는 페이지 간 비교에 대한 설정 정보를 편집하는 페이지를 제공할 수 있다.

도 7은 페이지 간 비교에 대한 설정 정보를 편집하는 페이지를 설명하기 위한 도면이다.

도 7을 참조하면, 사용자로부터 Operation에 대한 아이콘(660)을 통한 입력을 수신함에 따라, 전자 장치(100)는 페이지 간 비교에 대한 설정 정보를 편집하는 페이지(700)를 제공할 수 있다. 페이지(700)는 pc cart page EN(710)의 설정 정보에 대한 페이지일 수 있다. 보다 상세하게는, 페이지(700)는 도 6의 테스트 환경의 URL이 'http://cart.coupang.com/cartView.pang'(610)인 타겟 페이지의 페이지 간 비교에 대한 설정 정보를 편집하는 페이지일 수 있다. 페이지(700)의 설정 정보는 Diff Rule로 호칭될 수 있고, 설정 정보는 1) 페이지에 포함되는 요소 중 제1 요소를 페이지 간 비교에서 제외하는 정보 및 2) 페이지에 포함되는 요소 중 제2 요소를 페이지 간 비교에서 포함하는 정보를 포함할 수 있다.

1) 페이지에 포함되는 요소 중 제1 요소를 페이지 간 비교에서 제외하는 정보는 Exclude Rule(720)로 호칭될 수 있다. Exclue Rule(720)은 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지의 비교에서 제외되는 요소에 대한 설정을 의미하는 것일 수 있다. 예를 들어, Exclude Rule(720)은 'header' 및 'widget'에 대응하는 id에 대한 영역을 비교의 대상에서 제외하는 설정일 수 있다.

2) 페이지에 포함되는 요소 중 제2 요소를 페이지 간 비교에서 포함하는 정보는 Compare Only Rule(730)로 호칭될 수 있다. Compare Only Rule(730)은 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지의 비교에 포함되는 요소에 대한 설정을 의미하는 것일 수 있다. 다만, 도 7의 실시 예와 같이 Compare Only Rule(730)에 별다른 설정이 없는 경우, Exclude Rule(720)에 포함되지 않는 요소는 모두 비교의 대상에 포함될 수 있다.

이에 따라, 제1 페이지 및 제2 페이지는 Exclude Rule(720)에 대응하는 요소를 포함하지 않고, Compare Only Rule(730)에 대응하는 요소를 포함하는 것을 특징으로 할 수 있다.

도 8은 테스트 환경의 URL을 설정하고, 저장하는 페이지를 설명하기 위한 도면이다.

도 8을 참조하면, 페이지(800)는 테스트 환경의 URL을 저장하는 페이지를 나타내고 있다. 페이지의 레이아웃은 디바이스의 종류 및 OS 등에 따라 상이할 수 있다. 예를 들어, 페이지의 레이아웃은 컴퓨팅 디바이스를 통한 웹페이지인지 또는 모바일 디바이스를 통한 페이지인지 여부에 따라 상이할 수 있고, 페이지의 레이아웃은 모바일 디바이스의 OS가 Android인지 IOS인지 여부에 따라 상이할 수 있다. 따라서, 전자 장치(100)는 Web, Android, IOS를 선택할 수 있도록 페이지(800)의 탭(810)을 제공할 수 있다. 또한, 페이지(800)의 아이콘(820)을 체크한 후 저장함에 따라, 전자 장치(100)는 테스트 데이터를 Data Storage(350)의 Mysql에 저장할 수 있다.

또한, 도 8의 index 넘버가 1인 'https://cart.coupang.com/subscribe-cart'은 포스트 액션 스텝을 포함할 수 있고, 포스트 액션 스텝은 1) num이 1인 bottom expand link를 클릭하는 제1 액션, 2) num이 2인 물음표 아이콘에 마우스를 스크롤하는 제2 액션 및 3) num이 3인 제2 액션에 후속하여 리뷰 정보를 추가적으로 제공하는 제3 액션을 포함할 수 있다. 즉, 사용자의 액션에 따라 추가적으로 노출되는 UI 등도 테스트의 비교 대상에 포함될 수 있다.

페이지(800)의 아이콘(820)이 체크된 후에 아이콘(830)을 통해 실행에 대한 사용자의 입력이 실행되면, 전자 장치(100)는 체크된 테스트 데이터를 기반으로 페이지 간 차이 및 페이지의 실행 과정에서 발생하는 에러 중 적어도 하나에 대한 테스트를 실행할 수 있다.

페이지(800)의 아이콘(840)을 통해 사용자의 입력이 수신되면, 전자 장치(100)는 테스트의 실행을 관리하는 페이지를 제공할 수 있다.

도 9는 도 8에 이어, 테스트의 실행을 관리하는 페이지를 설명하기 위한 도면이다.

도 9를 참조하면, 페이지(900)는 선택된 테스트 데이터에 대한 테스트의 실행을 관리하기 위한 페이지일 수 있다. 사용자는 페이지(900)를 통해 선택된 테스트 환경의 URL(테스트 환경의 URL은 테스트 환경에서의 타겟 페이지일 수 있다.)에 대한 테스트의 목록을 확인할 수 있다. 예를 들어, 테스트 환경의 타겟 페이지에 대해 설정된 테스트는 index 넘버 1에서 4까지로 총 4개가 있을 수 있고, 테스트는 test A config(910) 및 test B config(920)이 있을 수 있다.

사용자가 복수 개의 테스트 중 default 값을 yes로 변경한 테스트의 설정 정보에 기반하여, 전자 장치(100)는 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지의 차이와 제1 페이지 및 제2 페이지에 포함되는 에러 중 적어도 하나의 테스트를 수행할 수 있다.

아이콘(930)을 통해 테스트 설정에 대한 사용자의 입력이 수신되면, 전자 장치(100)는 해당 테스트의 설정 정보를 편집하는 상세 페이지를 제공할 수 있다.

도 10은 테스트를 설정하는 상세 페이지를 설명하기 위한 도면이다.

도 10는 도 9의 test B에 대응하는 아이콘을 통한 사용자의 입력에 대응하여, 전자 장치(100)가 사용자에게 제공하는 test B에 대한 설정 정보를 편집하는 상세 페이지를 나타내고 있다. 사용자는 페이지(1000)를 통해 'cart.coupang.com'에 대응하는 테스트 서버를 설정하는 등 테스트에 대한 설정 정보를 설정할 수 있다.

페이지(1000)의 테스트의 이름은 test B config(1010)일 수 있다. 또한, 페이지(1000)의 account(1020)는 해당 테스트의 사용자에 대한 정보로, 'UserA@coupang.com'일 수 있다. 페이지(1000)의 Check Text Only(1030)는 페이지 간 비교에 있어, 페이지에 포함되는 텍스트의 차이만 볼지 여부에 대한 정보일 수 있다. 1) 예를 들어, 도 10과 같이 check Text Only에 'No'인 경우, 전자 장치(100)는 페이지에 포함되는 텍스트의 차이뿐만 아니라 CSS, JS 양식 또한 검출할 수 있다. 2) 반대로, check Text Only에 'Yes'인 경우, 전자 장치(100)는 페이지에 포함되는 텍스트의 차이만을 검출할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 테스트에 대한 테스트 설정 정보에 기반하여, 제1 페이지 및 제2 페이지에 대한 A/B 테스트를 수행할 수 있다. 보다 상세하게는, 전자 장치(100)는 A/B 테스트의 비교의 기준인 A 및 비교의 대상인 B에 대한 설정 정보에 기반하여, A/B 테스트를 수행할 수 있다.

페이지(1000)의 Baseline Config(1040)은 비교의 기준이 되는 베이스 환경을 설정하는 부분일 수 있다. 테스트가 현재 서비스 중인 페이지와 런칭 예정 중인 페이지를 비교하기 위한 테스트라면, 비교의 기준은 현재 서비스 중인 페이지일 수 있다. 즉, Baseline Config(1040)의 디폴트 값은 Production(1041)로 설정될 수 있다. 다만, Baseline Config(1040)는 Production(1041)으로 한정되는 것은 아니다. 예를 들어, 복수 개의 런칭 예정 중인 페이지를 비교하기 위한 테스트라면, Baseline Config(1040)는 Production(1041)으로 한정되지 않을 수 있다.

페이지(1000)의 Test Config(1050)은 비교의 대상이 되는 테스트 환경을 설정하는 부분일 수 있다. 보다 상세하게는, 사용자가 'cart.coupang.com'에 대한 테스트를 수행할 때, 전자 장치(100)는 페이지(1000) Host mapping(1060)을 통해 'cart.coupang.com'에 대응하는 테스트 서버를 선택하도록 할 수 있다. 도 10을 참조하면, 타겟 페이지인 'cart.coupang.com'의 테스트 환경은 'PERM_coupang_cart_web_stage5'으로 설정될 수 있다.

도 11은 트래픽 데이터에 대한 페이지를 설명하기 위한 도면이다.

도 11은 테스트 환경에 대한 트래픽 데이터 및 베이스 환경에 대한 트래픽 데이터를 표시하는 페이지(1100)를 설명하기 위한 도면이다. 예를 들어, 아이콘(1110)을 통한 사용자의 입력에 대응하여, 전자 장치(100)는 페이지(1100)를 통해 테스트 환경에 대한 트래픽 데이터 및 베이스 환경에 대한 트래픽 데이터를 제공할 수 있다. 예를 들어, 아이콘(1110)이 'Perm' 또는 'test'인 경우, 전자 장치(100)는 QA가 테스트를 진행할 때 이용된 트래픽 데이터를 제공할 수 있다. 반대로, 아이콘(1110)이 production인 경우, 전자 장치(100)는 현재 서비스 제공 중인 트래픽 데이터를 페이지(1100)를 통해 제공할 수 있다. 여기서, 현재 서비스 제공 중인 트래픽 데이터는 트래픽 양이 방대한 바, 배치를 통해 수집되는 것을 특징으로 할 수 있다. 반대로, QA가 테스트를 진행할 때 이용된 트래픽 데이터는 온라인을 통해 실시간으로 수집되는 것을 특징으로 할 수 있다.

이에 더해, 전자 장치(100)는 페이지(1100)를 통해 트래픽 데이터의 수집 기간에 대한 아이콘(1120) 및 트래픽 데이터에 대응하는 도메인에 대한 정보를 설정하는 아이콘(1130)을 제공할 수 있다. 예를 들어, 도 11을 참조하면, 전자 장치(100)는 2022년 6월 18일에서 2022년 6월 20일에 수집된 서비스 제공 중인 트래픽 데이터 중 도메인이 'Coupang-web'인 트래픽 데이터를 페이지(1100)에 표시할 수 있다.

또한, Reply Count에 대한 아이콘(1140)을 통해 사용자가 Reply Count를 변경하면, 전자 장치(100)는 설정된 Reply Count에 기반하여, 타겟 URL의 하위에 포함되는 세부 URL 중 타겟 URL의 하위에 정렬되는 세부 URL을 결정할 수 있다.

도 12는 도 11에 이어, 트래픽 데이터에 대한 페이지를 설명하기 위한 도면이다.

도 12를 참조하면, 페이지(1200)는 2022년 6월 18일에서 2022년 6월 20일에 수집된 서비스 제공 중인 트래픽 데이터 중 도메인이 'Coupang-web'인 트래픽 데이터를 표시할 수 있다. 페이지(1200)의 Reply Count에 아이콘(1205)을 통해 Reply Count는 5로 결정될 수 있고, 전자 장치(100)는 표시되는 트래픽을 총 방문 횟수인 frequency(1220)에 기반하여 방문 횟수가 많은 URL부터 순서대로 정렬하여 페이지(1200)를 제공할 수 있다.

예를 들어, URL version이 'vp/products/_num_'인 URL은 총 방문 횟수가 18395회로 방문 횟수가 가장 많은 URL 페이지일 수 있다. 또한, URL version이 'vp/products/_num_'(1210)인 URL의 하위 포함되는 세부 URL 중 URL이 'vp/products/121816223'(1211)은 index 넘버가 2 내지 5인 URL과 동일하게 call이 9인 URL에 해당될 수 있다. 전자 장치(100)는 Reply Count가 5인 바, 'vp/products/121816223'(1211)을 포함하는 index 넘버가 1 내지 5인 URL을 'vp/products/_num_'(1210)에 표시하여 제공할 수 있다.

전자 장치(100)는 사용자의 설정에 따라 트래픽 데이터 중 일부만을 리플라이하여 페이지(1200)에 표시할 수 있다. 보다 상세하게는, 전자 장치(100)는 사용자의 설정에 대응하는 트래픽 데이터 중 방문 횟수가 높은 URL을 페이지(1200)의 상단 또는 첫 페이지에 표시할 수 있다. 즉, 동일한 도메인에 속하는 페이지는 일부 레이아웃에 포함되는 컨텐츠를 제외하고는 비슷한 레이아웃으로 구성될 수 있는 바, 방문 횟수가 많은 URL에 대응하는 페이지에 기반하여 비교하더라도 UI Diff를 확인할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 수집된 프로덕션 환경에 대한 트래픽 데이터에 대응되는 방문 횟수에 기반하여, 방문횟수가 기 설정된 임계치 이상인 프로덕션 환경에 대한 트래픽 데이터를 확인할 수 있다. 예를 들어, 도 12를 참조하면, 전자 장치(100)는 Coupang_web을 통해 product의 상세 페이지를 비교하는 테스트를 수행할 때, 프로덕션 환경에 대한 트래픽 데이터로 index 넘버가 1 내지 5인 URL을 활용할 수 있다.

도 13은 테스트의 수행에 따른 결과에 대한 페이지를 설명하기 위한 도면이다.

페이지(1300)는 페이지 간 차이 및 페이지에 포함되는 에러에 대한 테스트의 수행에 따른 결과에 대한 페이지일 수 있다. 예를 들어, 페이지(1300)는 제1 테스트(1310), 제2 테스트(1320) 및 제3 테스트(1330)를 포함하는 복수 개의 테스트의 수행에 따른 결과를 포함할 수 있다. 페이지(1300)는 테스트 되어 테스트의 결과가 성공 또는 실패로 결정된 테스트뿐만 아니라 아직 실행 중인 테스트도 포함할 수 있다.

또한, 페이지(1300)는 각각의 테스트의 수행에 따른 결과 정보에 대한 페이지에 대한 엔트리 포인트를 포함할 수 있다. 예를 들어, 아이콘(1321)을 통한 사용자 입력을 수신함에 따라, 전자 장치(100)는 제2 테스트(1320)의 수행에 따른 결과 정보를 포함하는 리포트를 제공할 수 있다.

도 14는 테스트의 수행에 따른 결과 정보를 포함하는 페이지를 설명하기 위한 도면이다.

일 실시 예에 따르면, 전자 장치(100)는 메인 스레드를 통해 제1 페이지 및 제2 페이지의 차이에 대한 테스트를 수행할 수 있고, 이에 따른 결과 정보를 포함하는 페이지(1400)를 제공할 수 있다.

예를 들어, 페이지(1400)는 Diff Result에 대한 상세 페이지에 대응하는 제1 엔트리 포인트(1410), Diff image에 대한 상세 페이지에 대응하는 제2 엔트리 포인트(1420) 및 Html Report에 대한 상세 페이지에 대응하는 제3 엔트리 포인트(1430)를 포함할 수 있다. 이에 대한 자세한 설명은 도 15 내지 도 19에서 자세히 살펴보기로 한다.

도 15는 제1 페이지 및 제2 페이지의 차이를 비교하기 위한 비교 이미지를 설명하기 위한 도면이다.

일 실시 예에 따르면, 전자 장치(100)는 제1 페이지 및 제2 페이지의 차이를 슬라이드 아이콘을 통해 나타내는 비교 이미지를 포함하는 리포트를 제공할 수 있다. 도 15를 참조하면, 페이지(1500)의 baseline image는 제1 페이지에 대응되고, 페이지(1500)의 test image는 제2 페이지에 대응될 수 있다. 또한, 제1 페이지 및 제2 페이지의 차이를 슬라이드 아이콘을 통해 나타내는 비교 이미지(1510)는 도 15와 같이 생성될 수 있다.

예를 들어, 비교 이미지(1510)는 제1 페이지에 대응하는 영역인 제1 영역(1520) 및 제2 페이지에 대응하는 영역인 제2 영역(1530)을 서로 겹치게 표시하는 것을 특징으로 할 수 있다. 또한, 비교 이미지(1510)는 비교 이미지(1510)의 가운데 위치한 슬라이드 아이콘(1540)을 통해 제1 영역(1520) 및 제2 영역(1530)이 표시되는 비율이 조절되는 것을 특징으로 할 수 있다. 이에 따라, 사용자는 비교 이미지(1510)의 슬라이드 아이콘(1540)을 통해 제1 영역(1520) 및 제2 영역(1530)이 표시되는 비율이 조절함에 따라, 제1 이미지 및 제2 이미지의 차이를 용이하게 파악할 수 있다. 보다 상세하게는, 사용자는 비교 이미지를 통해 텍스트 등의 차이 및 JS, CSS 양식 등에 따른 색 차이를 파악할 수 있다.

도 16은 제1 이미지 및 제2 이미지를 설명하기 위한 도면이다.

일 실시 예에 따르면, 전자 장치(100)는 제1 페이지 및 제2 페이지의 차이에 기반하여, 제2 페이지에 포함되는 요소 중 대응되는 제1 페이지의 요소와 상이한 제1 요소를 확인하고, 및 제1 요소가 표시된 제2 페이지를 포함하는 리포트를 제공할 수 있다.

도 16을 참조하면, 전자 장치(100)는 제1 페이지(1610) 및 제2 페이지(1620)를 제공할 수 있다. 이때, 제1 페이지(1610) 및 제2 페이지(1620)는 상이한 환경에서의 타겟 페이지에 대응하는 UI인 바, 제1 페이지(1610)에 포함되는 제2 요소와 제2 페이지(1620)에 포함되는 제3 요소는 차이가 있을 수 있다. 여기서, 제3 요소는 제2 요소와 대응되는 요소일 수 있다. 예를 들어, 제1 페이지(1610)에 포함되는 카테고리에 대한 제2 요소(1630)와 제2 페이지(1620)에 포함되는 카테고리에 대한 제3 요소(1640)는 상이 할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 제2 페이지(1620)에 포함되는 카테고리에 대한 제3 요소(1640)가 강조되어 표시된 제2 페이지(1620)를 제공할 수 있다. 보다 상세하게는, 전자 장치(100)는 도 3의 selenium(311)을 통해 카테고리에 대한 제3 요소(1640)가 강조되어 표시된 제2 페이지(1620)를 제공할 수 있다.

도 17은 테스트의 수행에 따른 결과 정보인 Diff Result를 설명하기 위한 도면이다.

일 실시 예에 따르면, 전자 장치(100)는 테스트의 수행에 따른 결과 정보인 Diff result(1700)를 제공할 수 있다. 예를 들어, 전자 장치(100)는 테스트 수행에 따른 에러 정보를 포함하는 Diff result(1700)를 제공할 수 있다. 여기서, Diff result(1700)는 상이한 환경에서의 페이지를 실행함에 따라 발생하는 에러를 포함할 수 있고, 에러는 제1 페이지에 대응하는 제1 콘솔 에러, 제2 페이지에 대응하는 제2 콘솔 에러, 페이지에 포함되는 리소스에 대한 로드 에러 중 적어도 하나를 포함하는 것을 특징으로 할 수 있다.

예를 들어, Diff result(1700)는 1) js and css errors, 2) other resource errors, 3) other resource warning, 4) text compare errors, 5) resource loading error, 6) existing console errors 및 7) new console errors를 포함할 수 있다. 도 17을 참조하면, js and css errors는 6개로, 테스트 환경 및 베이스 환경에서 사용하는 리소스가 다름에 따라 발생하는 에러일 수 있다. Existing console errors는 1개로, 베이스 환경 또는 프로덕션 환경에서 발생하는 에러일 수 있다. 또한, new console errors는 테스트 환경에서 타겟 페이지를 실행함에 따라 발견된 에러일 수 있다. 전자 장치(100)는 에러에 대한 사용자의 입력에 대응하여 사용자의 입력이 수신된 에러에 대한 상세 내용을 제공할 수 있다.

도 18은 테스트의 수행에 따른 결과 정보인 Diff Result를 설명하기 위한 도면이다.

일 실시 예에 따르면, 전자 장치(100)는 제2 페이지에 대응되는 제2 소스 코드 중 제1 페이지에 대응하는 제1 소스 코드와 상이한 소스 코드인 제3 소스 코드를 확인하고, 및 제3 소스 코드가 표시된 제2 소스 코드를 포함하는 리포트를 제공할 수 있다.

일 실시 예에 따르면, 전자 장치(100)는 테스트의 수행에 따른 결과 정보인 Diff result(1800)를 제공할 수 있다. 전자 장치(100)는 text compare errors(1810)에 대한 사용자의 입력에 대응하여, text compare errors(1810)에 대한 상세 내용을 제공할 수 있다.

도 18을 참조하면, text compare errors(1810)은 제1 페이지에 대응하는 제1 소스 코드(1820) 및 제2 페이지에 대응하는 제2 소스 코드(1830)를 포함할 수 있다. 이때, 전자 장치(100)는 제2 페이지에 대응되는 제2 소스 코드(1820) 중 제1 페이지에 대응하는 제1 소스 코드(1830)와 상이한 소스 코드인 제3 소스 코드를 확인할 수 있다. 도 18을 참조하면, 제3 소스 코드는 소스 코드(1831), 소스 코드(1832), 소스 코드(1833), 소스 코드(1834), 소스 코드(1835) 및 소스 코드(1836)를 포함할 수 있다. 예를 들어, 소스 코드(1831)와 대응되는 제1 소스 코드(1820)에 포함되는 요소는 20%이고, 소스 코드(1831)와 대응되는 제2 소스 코드(1830)에 포함되는 요소는 21%로 20%와 상이할 수 있다. 이때, 전자 장치(100)는 제1 소스 코드(1820)에 포함되는 요소인 20% 및 제2 소스 코드(1830)에 포함되는 요소인 21%를 하이라이트하여 Diff result(1800)을 제공할 수 있다.

도 19는 테스트의 수행에 따른 Html 리포트를 설명하기 위한 도면이다.

일 실시 예에 따르면, 전자 장치(100)는 테스트의 수행에 따른 결과 정보를 포함하는 Html 리포트(1900)를 제공할 수 있다. 예를 들어, Html 리포트(1900)는 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지의 실행에 따른 에러 중 적어도 하나에 대한 테스트에 대한 리포트일 수 있다. Html 리포트(1900)는 제1 페이지와 제2 페이지의 실행에 따른 에러가 있는지 여부에 대한 정보를 포함할 수 있다.

예를 들어, Html 리포트(1900)는 'url load success, status is 200 ok!'(1910)와 같이 url 로드에 따른 에러가 없을 나타내는 정보를 포함할 수 있다. 또한, Html 리포트(1900)는 'get console log error', 'get all img url on page' 및 'get all text on page'에 대한 step(1920)에 대응하여, 에러가 없음을 나타내는 정보인 'return result success'(1930)을 포함할 수 있다.

도 20은 일 실시 예에 따른 페이지에 대한 리포트를 제공하기 위한 전자 장치를 도식화한 블록도이다.

도 20의 전자 장치(2000)는 본원 명세서의 전자 장치(100)에 대응될 수 있다.

본 개시의 전자 장치(2000)는 일 실시 예에 따라, 트랜시버(2010), 프로세서(2020) 및 스토리지(2030)를 포함할 수 있다. 도 20에 도시된 구성요소들은 전자 장치를 구현하는데 있어서 필수적인 것은 아니어서, 본 명세서 상에서 설명되는 전자 장치(2000)는 위에서 열거된 구성요소들 보다 많거나, 또는 적은 구성요소들을 가질 수 있음을 본 실시 예와 관련된 기술분야에서 통상의 지식을 가진 자라면 이해할 수 있다. 한편 실시 예에서 프로세서(2020)는 적어도 하나의 프로세서를 포함할 수 있다. 또한, 전자 장치(100)는 디스플레이부(미도시)를 통해 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공할 수 있으나, 이에 한정되는 것은 아니다.

트랜시버(2010)는 유무선 통신 기술을 이용하여 외부의 장치와 통신할 수 있으며 트랜시버(2010)를 포함할 수 있다. 외부의 장치는 단말 또는 서버가 될 수 있다. 또한, 트랜시버(2010)가 이용하는 통신 기술에는 GSM(Global System for Mobile communication), CDMA(Code Division Multi Access), LTE(Long Term Evolution), 5G, WLAN(Wireless LAN), Wi-Fi(Wireless-Fidelity), 블루투스(Bluetooth), RFID(Radio Frequency Identification), 적외선 통신(Infrared Data Association; IrDA), ZigBee, NFC(Near Field Communication) 등이 있을 수 있으며, 이에 한정되는 것은 아니다.

일 실시 예에 따라, 트랜시버(2010)는 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 외부의 데이터 스토리지로 전송할 수 있다. 또한, 트랜시버(2010)는 베이스 환경에 대한 트래픽 데이터 및 테스트 환경에 대한 트래픽 데이터를 외부의 데이터 스토리지 또는 서버(110)로부터 수신할 수 있다.

프로세서(2020)는 전자 장치(2000)의 전반적인 동작을 제어하고 데이터 및 신호를 처리할 수 있다. 프로세서(2020)는 도 1 내지 도 19를 통하여 전술한 하나의 방법을 수행할 수 있다. 프로세서(2020)는 트랜시버(2010) 및 스토리지(2030)와, 나아가 전자 장치(2000)가 더 포함할 수 있는 구성요소들과의 상호 작용을 통해 전자 장치(2000)가 수행하는 실시 예들을 제어할 수 있다. 일 실시 예에 따라, 프로세서(2020)는 타겟 페이지를 확인하고, 베이스 환경 및 테스트 환경을 확인하고, 페이지 간 비교에 대한 설정 정보에 기반하여, 베이스 환경에서의 타겟 페이지에 대응하는 제1 페이지 및 테스트 환경에서의 타겟 페이지에 대응하는 제2 페이지를 확인하고, 제1 페이지와 제2 페이지의 차이 및 제1 페이지와 제2 페이지에 포함되는 에러 중 적어도 하나에 대한 테스트를 수행하고, 및 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공할 수 있다.

스토리지(2030)는 도 1 내지 도 19를 통하여 전술한 적어도 하나의 방법을 수행하기 위한 정보를 저장할 수 있다. 스토리지(2030)는 메모리로 호칭될 수 있고, 휘발성 메모리 또는 비휘발성 메모리일 수 있다. 또한, 스토리지(2030)는 프로세서(1520)의 동작을 수행하는데 필요한 하나 이상의 명령어를 저장할 수 있고, 플랫폼 상에 저장되거나 외부 메모리에 저장되는 데이터를 임시적으로 저장할 수 있다. 예를 들어, 스토리지(2030)는 도 3의 Data Storage(350)과 대응될 수 있으나 이에 한정되는 것은 아니고, Data Storage(350)은 전자 장치(2000)의 외부에 위치할 수 있다.

한편, 본 명세서와 도면에는 본 발명의 바람직한 실시 예에 대하여 개시하였으며, 비록 특정 용어들이 사용되었으나, 이는 단지 본 발명의 기술 내용을 쉽게 설명하고 발명의 이해를 돕기 위한 일반적인 의미에서 사용된 것이지, 본 발명의 범위를 한정하고자 하는 것은 아니다. 여기에 개시된 실시 예 외에도 본 발명의 기술적 사상에 바탕을 둔 다른 변형 예들이 실시 가능하다는 것은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 자명한 것이다.

전술한 실시 예들에 따른 전자 장치 또는 단말은, 프로세서, 프로그램 데이터를 저장하고 실행하는 메모리, 디스크 드라이브와 같은 영구 저장부(permanent storage), 외부 장치와 통신하는 통신 포트, 터치 패널, 키(key), 아이콘 등과 같은 사용자 인터페이스 장치 등을 포함할 수 있다. 소프트웨어 모듈 또는 알고리즘으로 구현되는 방법들은 상기 프로세서상에서 실행 가능한 컴퓨터가 읽을 수 있는 코드들 또는 프로그램 명령들로서 컴퓨터가 읽을 수 있는 기록 매체 상에 저장될 수 있다. 여기서 컴퓨터가 읽을 수 있는 기록 매체로 마그네틱 저장 매체(예컨대, ROM(read-only memory), RAM(random-Access memory), 플로피 디스크, 하드 디스크 등) 및 광학적 판독 매체(예컨대, 시디롬(CD-ROM), 디브이디(DVD: Digital Versatile Disc)) 등이 있다. 컴퓨터가 읽을 수 있는 기록 매체는 네트워크로 연결된 컴퓨터 시스템들에 분산되어, 분산 방식으로 컴퓨터가 판독 가능한 코드가 저장되고 실행될 수 있다. 매체는 컴퓨터에 의해 판독가능하며, 메모리에 저장되고, 프로세서에서 실행될 수 있다.

본 실시 예는 기능적인 블록 구성들 및 다양한 처리 단계들로 나타내어질 수 있다. 이러한 기능 블록들은 특정 기능들을 실행하는 다양한 개수의 하드웨어 또는/및 소프트웨어 구성들로 구현될 수 있다. 예를 들어, 실시 예는 하나 이상의 마이크로프로세서들의 제어 또는 다른 제어 장치들에 의해서 다양한 기능들을 실행할 수 있는, 메모리, 프로세싱, 로직(logic), 룩 업 테이블(look-up table) 등과 같은 직접 회로 구성들을 채용할 수 있다. 구성 요소들이 소프트웨어 프로그래밍 또는 소프트웨어 요소들로 실행될 수 있는 것과 유사하게, 본 실시 예는 데이터 구조, 프로세스들, 루틴들 또는 다른 프로그래밍 구성들의 조합으로 구현되는 다양한 알고리즘을 포함하여, C, C++, 자바(Java), 어셈블러(assembler), 파이썬(Python) 등과 같은 프로그래밍 또는 스크립팅 언어로 구현될 수 있다. 기능적인 측면들은 하나 이상의 프로세서들에서 실행되는 알고리즘으로 구현될 수 있다. 또한, 본 실시 예는 전자적인 환경 설정, 신호 처리, 및/또는 데이터 처리 등을 위하여 종래 기술을 채용할 수 있다. “매커니즘”, “요소”, “수단”, “구성”과 같은 용어는 넓게 사용될 수 있으며, 기계적이고 물리적인 구성들로서 한정되는 것은 아니다. 상기 용어는 프로세서 등과 연계하여 소프트웨어의 일련의 처리들(routines)의 의미를 포함할 수 있다.

전술한 실시 예들은 일 예시일 뿐 후술하는 청구항들의 범위 내에서 다른 실시 예들이 구현될 수 있다.

Claims (14)

1. 전자 장치에서 페이지에 대한 리포트를 제공하는 방법에 있어서,
   타겟 페이지를 확인하는 단계;
   베이스 환경 및 테스트 환경을 확인하는 단계;
   페이지 간 비교에 대한 설정 정보에 기반하여, 상기 베이스 환경에서의 상기 타겟 페이지에 대응하는 제1 페이지 및 상기 테스트 환경에서의 상기 타겟 페이지에 대응하는 제2 페이지를 확인하는 단계;
   상기 제1 페이지와 상기 제2 페이지의 차이 및 상기 제1 페이지와 상기 제2 페이지에 포함되는 에러 중 적어도 하나에 대한 테스트를 수행하는 단계; 및
   상기 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공하는 단계를 포함하는 페이지에 대한 리포트를 제공하는 방법.
   
2. 제1항에 있어서,
   상기 베이스 환경 및 상기 테스트 환경을 확인하는 단계는,
   배치를 통해 수집된 베이스 환경에 대한 트래픽 데이터에 기반하여, 베이스 환경을 확인하는 단계; 및
   온라인으로 수집된 테스트 환경에 대한 트래픽 데이터에 기반하여, 테스트 환경을 확인하는 단계를 포함하는 페이지에 대한 리포트를 제공하는 방법.
   
3. 제2 항에 있어서,
   상기 베이스 환경을 확인하는 단계는,
   상기 수집된 베이스 환경에 대한 트래픽 데이터에 대응되는 방문 횟수에 기반하여, 방문 횟수가 설정된 임계치 이상인 상기 베이스 환경을 확인하는 단계를 포함하는 페이지에 대한 리포트를 제공하는 방법.
   
4. 제1 항에 있어서,
   상기 설정 정보는 상기 페이지에 포함되는 요소 중 제1 요소를 상기 페이지 간 비교에서 제외하는 정보 및 상기 페이지에 포함되는 요소 중 제2 요소를 상기 페이지 간 비교에 포함하는 정보 중 적어도 하나를 포함하는 것을 특징으로 하는 페이지에 대한 리포트를 제공하는 방법.
   
5. 제 4항에 있어서,
   상기 제1 페이지 및 상기 제2 페이지는 상기 제1 요소를 미포함하고, 상기 제2 요소를 포함하는 페이지인 것을 특징으로 하는 페이지에 대한 리포트를 제공하는 방법.
   
6. 제1 항에 있어서,
   상기 테스트를 수행하는 단계는,
   상기 테스트에 대한 테스트 설정 정보에 기반하여, 상기 제1 페이지 및 상기 제2 페이지에 대한 A/B 테스트를 수행하는 단계를 포함하는 페이지에 대한 리포트를 제공하는 방법.
   
7. 제1 항에 있어서,
   상기 제1 페이지 및 상기 제2 페이지를 확인하는 단계는,
   제1 스레드 및 제2 스레드를 이용하여 병렬적으로 상기 제1 페이지 및 상기 제2 페이지를 확인하는 단계를 포함하고,
   상기 테스트를 수행하는 단계는,
   메인 스레드를 통해 상기 제1 페이지 및 상기 제2 페이지의 차이에 대한 테스트를 수행하는 단계를 포함하는 페이지에 대한 리포트를 제공하는 방법.
   
8. 제1 항에 있어서,
   상기 리포트를 제공하는 단계는,
   상기 제1 페이지 및 상기 제2 페이지의 차이를 슬라이드 아이콘을 통해 나타내는 비교 이미지를 포함하는 상기 리포트를 제공하는 단계를 포함하는 페이지에 대한 리포트를 제공하는 방법.
   
9. 제1 항에 있어서,
   상기 리포트를 제공하는 단계는,
   상기 제1 페이지 및 상기 제2 페이지의 차이에 기반하여, 상기 제2 페이지에 포함되는 요소 중 대응되는 상기 제1 페이지의 요소와 상이한 제1 요소를 확인하는 단계; 및
   상기 제1 요소가 표시된 상기 제2 페이지를 포함하는 상기 리포트를 제공하는 단계를 포함하는 페이지에 대한 리포트를 제공하는 방법.
   
   
10. 제1 항에 있어서,
    상기 리포트를 제공하는 단계는,
    상기 제2 페이지에 대응되는 제2 소스 코드 중 상기 제1 페이지에 대응하는 제1 소스 코드와 상이한 소스 코드인 제3 소스 코드를 확인하는 단계; 및
    상기 제3 소스 코드가 표시된 상기 제2 소스 코드를 포함하는 상기 리포트를 제공하는 단계를 포함하는 페이지에 대한 리포트를 제공하는 방법.
    
11. 제1 항에 있어서,
    상기 에러는 제1 페이지에 대응하는 제1 콘솔 에러, 제2 페이지에 대응하는 제2 콘솔 에러, 페이지에 포함되는 리소스에 대한 로드 에러 중 적어도 하나를 포함하는 것을 특징으로 하는 페이지에 대한 리포트를 제공하는 방법.
    
12. 제1 항에 있어서,
    상기 제1 페이지 및 상기 제2 페이지의 차이는 상기 페이지 간의 이미지, 텍스트 및 리소스의 차이 중 적어도 하나를 포함하는 것을 특징으로 하는 페이지에 대한 리포트를 제공하는 방법.
13. 페이지에 대한 리포트를 제공하기 위한 전자 장치에 있어서,
    트랜시버;
    하나 이상의 명령어를 저장하는 스토리지; 및
    타겟 페이지를 확인하고,
    베이스 환경 및 테스트 환경을 확인하고,
    페이지 간 비교에 대한 설정 정보에 기반하여, 상기 베이스 환경에서의 상기 타겟 페이지에 대응하는 제1 페이지 및 상기 테스트 환경에서의 상기 타겟 페이지에 대응하는 제2 페이지를 확인하고,
    상기 제1 페이지와 상기 제2 페이지의 차이 및 상기 제1 페이지와 상기 제2 페이지에 포함되는 에러 중 적어도 하나에 대한 테스트를 수행하고, 및
    상기 테스트의 수행에 따른 결과 정보를 포함하는 리포트를 제공하는 프로세서를 포함하는 페이지에 대한 리포트를 제공하기 위한 전자 장치.
    
14. 제1항의 방법을 컴퓨터에서 실행시키기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 비일시적 기록매체.
    

Images