DEVOCEAN

들어가며

이번 글에서는 에이닷 멀티LLM WEB 기반 프로젝트를 진행하며 경험한

OS 및 브라우저별 특성, QA 과정에서 마주쳤던 어려움, 그리고 WEB 검증 시 중점적으로 살펴봐야 할 요소 등 전반적인 노하우를 공유하고자 합니다.

본 내용은 각 WEB 사이트의 개발 환경, 구현 방식, 로직에 따라 다소 차이가 있을 수 있으니 참고해주시기 바랍니다.

WEB PoC 종류

• 테스트 기기: PC / 스마트폰 / 태블릿 등

• 운영체제 : Windows / mac / Android / iOS 등

• 브라우저 : Chrome, Safari, Edge, Whale , Samsung internet 등

WEB 검증은 기기, 운영체제, 브라우저 환경(브라우저 버전 등 포함)등 조합이 다양하여 검증 전 유관부서와 함께 품질을 보장하는 커버리지에 대해 협의 후 진행하는게 좋습니다.

에이닷 경우 모바일 브라우저와 PC 브라우저 화면 구성이 달랐고, 화면 크기에 따라 반응형 디자인으로 동작하였습니다.

품질 보장 커버리지는 브라우저/OS 시장 점유율, 각 운영체제, 기기의 대표 브라우저 등을 고려하여 협의 후 선정하여 진행하였습니다.

브라우저/OS 시장 점유율은 아래 사이트에서 확인 가능합니다.

브라우저/OS 시장 점유율 확인

• 브라우저 / 사용 OS / OS 버전 등 기간/나라 별로 점유율 조회 가능(https://gs.statcounter.com/)

  • Chrome / Samsung Internet(Android) / Safari(MAC/iOS) / Whale / Edge : 우리나라 TOP 5 위 브라우저에 한하여 검증 진행 하였으며, 최신브라우저 버전으로 검증 진행하였습니다.

  • 브라우저가 하위버전일 경우 최신 표준 규격 적용 시 기능이 정상적으로 동작하지 않는 경우가 있습니다.

    브라우저 구버전에 동일 기능을 적용하려면 분기 되어 각 개발 적용이 필요하여 리소스 소요가 증가할 수 있어,서비스 오픈 시기,기간,타겟 등 고려하여 QA 시작 전 논의/협의 후 진행이 필요합니다.

브라우저/OS 특징

앞서 언급한 것처럼, Web 테스트는 테스트 기기, 브라우저, OS에 따라 다양한 조합으로 진행할 수 있습니다.

각 조합별로 고유한 특징이 존재하며, 이에 따라 검증 과정에서 기대했던 결과와 실제 결과가 달라지는 경우도 종종 발생하였습니다.

실제 테스트 과정에서 경험했던 몇 가지 대표적인 특징들을 정리해보았습니다.

다크모드

• 다크모드는 WEB 브라우저의 테마 색상을 어둡게 변경하는 것을 의미합니다.

• 다크모드 셋팅은 아래 두가지 영향을 받을 수 있습니다.

  • OS시스템 테마 : MAC,Windows,Android,iOS / 브라우저 자체 테마 : Chrome, (Mobile)Samsung internet, (PC)Edge, (PC)Whale

• WEB에서 구현한 다크모드 적용을 확인하려면 어떻게 셋팅 되어야 할지 아래와 같이 정리하였습니다.

  • WEB 자체 별도 시스템 설정이나, 추가적인 커스텀마이징 되는 경우 동작 상이할 수 있습니다.

• 
  

• ❗❗) Samsung-internet 경우 기본 브라우저 다크모드 동작은 자체 로직을 통해 컨텐츠의 색상을 변경합니다. 이는 실제 개발에서 구현된 색상과 다르게 표현될 수 있습니다.

• 삼성인터넷에서 각 서비스 개발에서 구현된 색상 확인을 위해서는 삼성인터넷-설정-실험실 "웹사이트 다크 테마 사용" 옵션을 ON 해줘야 합니다.

  
  

Mobile 이미지 다운로드

• 저희 서비스에서는 이미지를 다운로드 받을 수 있는 기능이 있습니다.

• LLM 응답에 포함되는 이미지는 확장자 구분 없이 답변에 포함된 이미지를 함께 응답내려줬습니다.

• 이슈❗) Mobile 갤러리(앨범)에서 열리지 않는 확장자의 이미지가 다운로드 받아지고 열리지 않는 이슈가 있었습니다.

• 해결) 지원하지 않은 확장자의 파일 경우는 다운로드 받을 수 없게 처리 하여 이슈를 해결하였습니다.

  
  

Mobile OS에 따라 앨범(갤러리) 확인 가능 확장자

Mobile 키패드 활성화 동작

• 입력영역이 하단에 위치하기 때문에, Mobile 에서 키패드를 활성화하는 경우 아래 이미지 처럼 입력영역을 키패드 상단으로 올리면서 화면 레이아웃을 다시 조정하였습니다.

• 해당 동작 자체는 이슈가 없었지만, 키보드 활성화 상태 유지는 OS, 브라우저별로 다르게 처리하고 있었으며 브라우저를 B/G -> F/G로 올릴 때 브라우저 특성으로 인해 대응이 어려운 이슈가 있었습니다.

• 이슈❗) 일부 브라우저에서 F/G로 올릴 때, 타이밍 등 원인으로 레이아웃 조정을 하지 못하여 키패드가 입력영역을 가림

• 해결) F/G로 올라온 상태에서 키패드가 활성화되어 있다면 키패드를 내리는 동작으로 레이아웃 이슈를 해결하였습니다.

  *구글 등 이슈 재현 브라우저에서는 동일하게 동작 구현되어 있음

Web 서비스 주요 검증 사항

멀티LLM WEB 서비스 검증을 진행하며 중점적으로 봤던 요소나 검증/이슈해결에 리소스가 많이 소요되었던 내용을 정리해봤습니다.

자동화 테스트 소개(Cypress)

서비스 오픈 당시에는 오픈 일정 등으로 자동화에 대한 고려를 할 수 없었으나, 한정된 일정/리소스로 넓은 커버리지의 품질 확보를 위해서는 자동화 테스트를 병행하여 진행하면 좋을 것 같습니다.

Cypress를 소개드린 이유는 다양한 브라우저/다양한 해상도 환경으로 테스트가 가능한 부분이 가장 큰 장점이라 생각되어 일부 동작에 대해서 적용해봤습니다.

다양한 브라우저 선택 실행 가능

• Desktop에 설치된 브라우저로 OPEN 가능

• 테스트 수행 브라우저로 선택 시, Cypress의 테스트 실행 환경 브라우저가 선택한 브라우저로 테스트 시작

해상도 변경 가능

• 단말 별 설정되어 있는 해상도 확인 가능 (https://docs.cypress.io/api/commands/viewport)

• 모바일 해상도 변경 가능하나 Cypress에 사전 설정되어 있지 않은 모델 경우 해당 모델의 해상도를 찾아 설정하여 확인해야함

자동화 테스트 적용

Web Site 접속

it('stg admin', () => {
  cy.visit('https://adot.ai/multillm');  //Web Page 접속
  cy.wait(3000); //접속 화면 확인 대기
  });

Web Site 로그인

it('login Test', () => {
  cy.visit('https://adot.ai/multillm');
  cy.get('.pr__cls').click();  //Page 내 팝업 닫기 요소 Click
  cy.get('.sd__btn--login').click();  //Page 내 로그인 버튼 Click

  cy.origin('https://accounts.adot.ai', () => {  //로그인 페이지로 이동 및 Origin 선언
            cy.visit('/signin/?poc_id=web.apollo');
            cy.get('.sg__btn--tid').click();
           });
  cy.url().then((currentUrl) => {       //동적 URL 동작으로 인해 Origin 선언 위한 URL 추출 
            const origin = fullUrl.origin;
            const pathname = fullUrl.pathname;
            const searchParams = fullUrl.search; 
  cy.origin(origin, { args: { pathname, searchParams } }, ({ pathname, searchParams }) => {  // cy.visit()로 전체 URL 재구성 및 Origin 선언
        cy.get('#inputId').type('***********');    //ID 입력
        cy.get('#inputPassword').type('*************');  //PW 입력
        cy.get('.btn-secondary').click();
        cy.wait(3000);
            });
             });
             });

• 브라우저의 보안 정책과 Cypress의 내부 아키텍처상 한 번에 하나의 origin만 안전하게 제어할 수 있기 때문에 사이트 URL(즉, origin)이 변경될 때마다 cy.origin()선언이 필요합니다.

• cy.origin을 통해 Cypress는 여러 origin 간의 테스트를 지원하면서도, 보안 정책을 준수하고 예측 가능한 테스트 환경을 제공합니다.

• 이슈❗) 동적 URL 동작 시, 고정된 URL로 사전에 Origin 선언을 할 수 없었습니다. Origin 선언을 하지 못해 새로운 페이지의 제어가 안되는 이슈가 있었습니다.

• 해결) 동적 URL을 확인하여 도메인과 쿼리 파라미터를 분리 추출하고 전체 URL로 재구성하여 Origin 선언을 하여 해결하였습니다.

<테스트 수행 결과 확인>

특정 요소 Click 응답 확인 및 텍스트 인풋/응답 확인

it(' event trigger test', () => {
    cy.visit('https://adot.ai/multillm');
    cy.get('.pr__cls').click();
    cy.get('.rc > :nth-child(1)').click(); // 이벤트 트리거

it('input test', () => {
    cy.visit('https://adot.ai/multillm');
    cy.get('.pr__cls').click();
    cy.get('.in__txt').type('고3 수학문제 예제 내줘');
    cy.get('.in__sbmt').click();
});

<테스트 수행 결과 확인>

마치며

• 웹 검증은 다양한 기기, 운영체제, 브라우저 환경의 조합에 따라 동작이 다르고 개발이 각 분기되어 적용 필요한 경우가 있어, 품질 보장 커버리지에 대해 유관부서와 사전 협의한 후 진행하는 것이 좋습니다.

• 다양한 조합/환경에서의 테스트는 예상과 다른 결과를 초래할 수 있으므로 실제 테스트 경험을 바탕으로 주요 이슈와 리소스 소요가 큰 부분을 우선적으로 관리/ 진행해야 합니다.

• 한정된 일정과 리소스 내에서 넓은 커버리지 품질을 확보하기 위해서는 Cypress와 같은 자동화 테스트 도구를 활용하는 것이 효과적입니다.

• 자동화 도입을 통해 반복적인 검증 작업의 효율을 높이고, 다양한 브라우저와 해상도 환경에서의 품질을 안정적으로 보장할 수 있습니다.