웹 그리드 변환(도입) 프로젝트를 위한 지침서

라잇텍
조회수 2108

웹 그리드 변환(도입) 프로젝트를 위한 지침서


*실제 운영 중인 시스템을 대상으로 웹그리드만을 큐셀로 도입하여 전환한 프로젝트를 실시하고 작성한 것입니다.

기존에 그리드를 사용하고 있는 상황에서 새로운 그리드를 도입하여 변환한다는것은 변환 체계를 만들어 일괄적으로 신속하게 동일한 품질과 동작을 기대할 수 있도록 변환하고 향후 유지보수 및 고도화를 이 체계를 활용하여 실시하는 것이 목표입니다.


일러두기

웹 그리드 제품은 일반적인 특성과 기능은 업계의 요구에 의해 유사하게 보이나 내부를 들여다보면 동일한 데이터, 기능, 스타일과 동작을 제공하기 위해 정의하는 속성과 방식, 사용하는 API와 인자, 로직의 처리 등이 다르다는 것을 확실하게 인지하고 변환 프로젝트를 실시해야 합니다.

본 글은 실무를 위한 지침서로 큐셀 그리드를 마케팅하기 위해 작성된 글이 아님을 알려드립니다.


시작 전

기존 그리드 사용 현황 파악과 정리 후 신규 도입하는 그리드에 맞춰 모든 내용을 정의하고 이에 대한 부분적인 테스트를 실시하여야 합니다. 개발활동이 아주 단순한 작업이 되고 빨리 진행될 수 있으려면 “시작 전” 활동이 철저하게 자세한 수준으로 실시되어야 합니다.


참여자

  • 기존 개발자 또는 유지보수 담당자

  • 신규 도입하는 그리드 기술지원 담당자

  • 프로젝트 투입될 개발자

  • 현업 담당자(결정권이 있는)

    • 제품간의 차이로 인해 스타일, 기능의 사용법, 상호작용하는 동작이 다소 차이가 발생할 수 있는데 이에 대한 사전 협의와 승인 후 진행하는 것이 중요


기존 그리드 사용 현황 파악과 정리

그리드를 사용하는 화면(프로그램)명과 그리드 수 등 전체 파악

  • 변환을 해야 할 그리드 수

    • 그 중에 전수 또는 부분 파악을 할 경우 파악할 대상의 그리드 표시

    • 유형별 패턴별 분류가 가능하면 파악할 대상의 그리드 수가 적어짐

      • 조회성, 입력(수정)성, 단일/다수 그리드, 탭 기반 그리드, 차트나 리포트와 연동, 팝업 연동, 데이터나 상황에 따른 동적 그리드 생성 등

  • 변환 시 추가로 반영하고 싶은 내용

    • 단순 변환이 아닌 일부 공통적으로 그리드에 반영하고 싶은 것이 있는지 파악하여 함께 정리

  • 화면별, 그리드별 특이사항 확인과 정리

  • 좀 더 정확한 변환 개발 기간 산정이 가능

  • 진행률 등 프로젝트 관리에 도움


그리드 생성과정

  • 제품마다 그리드 생성 절차가 다름

    • 특히 탭 기반으로 할 경우 차이가 많이 발생하므로 꼭 체크하고 검증할 영역


데이터 타입

  • 사용하는 데이터 타입과 데이터 형태

  • checkbox, selectmenu(selectlist), date(picker), time, image, input(button), html rendering

    • 확실하게 체크해야 할 타입과 데이터 형태

    • tooltip, sort, resize, move 옵션 체크

    • 날짜, 숫자, 주민번호, 전화번호 등 format 정리


헤더, 로우 헤더, 틀고정, 히든 컬럼

  • 헤더 높이(2줄 등)에 따라 코드가 변경되는 경우 있음

  • 히든 컬럼을 지원하지 않는 그리드(큐셀)의 경우 아래 작업 필요

    • 컬럼 정의에서 빠져야 하고 히든 컬럼을 참조(읽거나 쓰거나)하는 코드를 데이터 접근으로 바꿔야 함

  • 지원할 수 있는 로우 헤더인지, 로우헤더로 처리할 수 있는 컬럼인지 확인

  • 틀고정 로우와 컬럼 등 확인


병합(헤더, 데이터)

  • 헤더의 병합 기준이 적용되었는지 파악, 데이터의  병합 기준 파악


스타일 정의

  • 전체 그리드 스타일

    • 테마스타일을 하나 반영 후 사이트에 맞게 수정하는 것을 권장

  • 컬럼별, 로우별, 셀별

  • 동적 스타일

    • 동적 스타일을 적용하고 있는 곳이 있는지 적용하는 룰과 상황을 파악하여 도입하는 그리드로 적용할 수 있는지 체크 후 정리


인덱스 체계

  • 그리드 제품마다 헤더, 로우 헤더(컬럼)에 대한 인덱스가 다를 수 있고 이를 얻어내고 지칭하는 코드가 다름

  • 특히 컬럼 지칭을 키로 하는 것이 아닌 인덱스로 할 경우 해당 컬럼이 어떤 키에 대한 것인지 파악이 되어야 하고 그대로 갈 것인지 아니면 키 기반으로 갈 것인지 정리해야 함

이벤트

  • 이벤트 종류(그리드 전체, 컬럼별)

    • 그리드에 전체 이벤트를 걸고 이벤트 내용과 위치(로우, 컬럼)에 따라 로직으로 처리하는 경우 동일하게 갈 것인지 아니면 컬럼별 이벤트를 별도로 처리할 것인지 등 논의 후 확정

    • 기본적으로 동일하게 가는 것이 빠른 개발과 테스트 시 큰 이슈가 없지만 좋은 방식의 코딩과 도입하는 그리드의 장점을 살리지 못한다는 점이 있음

  • 전달하는파라미터


CRUD 처리 

  • 상태변경 방법

  • 상태값

  • 변경된 데이터와 상태값 얻기과 형식

  • 삭제에 대한 그리드내 표시 후에 처리, 바로 처리


트리 그리드

  • 제품마다 지원하는 정도와 표현이 다르므로 확인 필요


엑셀 처리

  • 그리드 컬럼(추가, 삭제, 순서변경), 숨은 데이터 추가 등 현재 동작에 대한 정확한 파악 필요

  • 다운로드,업로드방식

    • 브라우저 기반 저장인지, 서버 기반 저장인지 파악

    • 서버기반 저장인 경우 

      • 서버를 변경하지 않고 동작하기 위해서는 기존 그리드에서와 동일하게 전달할 수 있는 공통 코드 작성 필요


페이지네이션

  • 대량 데이터에 대한 처리 방식이 전체 로딩 후 로컬 페이지네이션인지 일부 데이터만 로딩 후 서버기반 페이지네이션인지를 파악

  • 이 외의 경우라면 어떤 식으로 처리하는지 파악하여 도입하는 그리드에 맞춰 동작할 수 있도록 공통함수 또는 기능의 추가나 확장


데이터 송수신 처리

  • 서버와 통신, 통신 후 데이터 파싱, 파싱 후 데이터를 그리드에 반영하는 과정을 동일하게 처리할 수 있는 구조인지 파악 후 샘플 그리드를 통해 확인


화면 구조(탭, 마스터-디테일, 팝업)와 처리 방식


그리드와 로직이 밀접하게 엮인  코드 분석


공통함수(스크립트)에 적용된 그리드 

  • 화면별 로직이 아닌 전역으로 사용하는공통함수(스크립트)에 그리드 관련 코드의 적용 수준과 내용 파악


동시에 신.구 그리드 사용 여부

  • 변환 후에도 기존 그리드 라이브러리를 사용할 것인지 여부


그리드 외에 사용하는 라이브러리

  • jQuery 버전별 충돌과 기능의 지원 여부가 다를 수 있음

  • 기타 라이브러리를 그리드 처리 과정에 사용하는지 여부


현재 소스기반의 테스트 환경 필요

  • 변환 개발 후 각 화면(프로그램)의 동작을 비교(속도, 스타일, 동작 등)할 수 있어야 함

  • 기존 개발 서버 환경 외 신규 서버 환경 구축 필요


착수 시

신속하게 개발을 진행하고 향후 그대로 빠르게 운영서버에 반영하기 위해서는 착수시 확실하게 아래 사항을 준수하여 진행해야 합니다.

  • 신규 (변환) 개발 환경(서버) 구축

  • 변환 개발과 테스트를 병행하여 진행할 수 있는 환경 구축

  • 현재 서비스를 비교하여 변환, 테스트 할 수 있도록 구축

  • 라이브러리 충돌 등 확인하며 구축

  • 과정을 자세하게 기록하여 향후 개발 서버 재구축 등에 활용될 수 있도록 함


개발과 테스트 병행 진행

사전 분석하여 정의한 변환 가이드 기반으로 변환 개발을 진행하는 것이라서 이미 잘 동작하는 프로그램이라는 점에서 화면 병행하여 진행할 수 있는 상황입니다.

병행하여 진행하면 무엇보다도 사전에 정의한 가이드의 부족한 점이나 잘못된 점이 테스트를 통해 파악되면 다른 변환 개발에 시행 착오없이 바로 적용하여 진행할 수 있다는 큰 이점이 있습니다. 또한 변환 진행에 대한 진척률에 대한 신뢰가 매우 높고 안정적인 관리를 할 수 있습니다.


기본 테스트

  • 화면 로딩과 전환 시 속도

  • 대량 컬럼의 표현과 좌우 스크롤링 시 속도

  • 대량 로우 데이터의 표현(로딩)과 상하 스크롤링 시 속도와 부하


화면별 테스트

  • 동일한 컬럼과 데이터

  • 정적 스타일과 적용된 것이 있으면 동적 스타일

  • 기능(CRUD, 엑셀, 셀 입력(텍스트, 날짜, 셀렉트리스트, 체크박스 등))

  • 이벤트 처리


완료 후

  • 변환 가이드 최종 업데이트

  • 변환 대상과 처리현황 업데이트

  • 주요 이슈 처리 내용 업데이트

  • 전파 교육

    • 유지보수 담당자 - 신규 도입된 그리드 사용법, 변환 프로젝트 결과와 기존 대비한 내용 리뷰 등

    • 현업 - 신규 도입된 그리드의 특장점, 변환 프로젝트 결과와 후기



2020년 7월

실제 운영 중인 시스템을 대상으로 웹그리드만을 큐셀로 도입하여 전환한 프로젝트를 실시하고 작성한 것입니다.

관련한 결과물은 저희 고객 대상으로 제공 예정입니다.


작성자: 곽노건 이사/동국대학교 국제정보보호대학원 겸임교수

소프트웨어공학, (보안)개발 방법론, 웹 개발(프로그래밍), 빅데이터처리, 악성 코드 및 역공학 등 강의

IT 관련 컨설팅, 특강을 원하시는 경우 문의해 주십시오.(james@righttech.co.kr)