저는 JSL을 사용하여 간단한 것부터 훨씬 복잡한 것까지 다양한 사용자 인터페이스를 만듭니다. 하지만 대부분 비슷한 원칙을 따릅니다. 스크립트는 유사한 템플릿을 사용하고, 실행 화면에서의 레이아웃도 비슷하며, 보고서의 모양도 유사합니다.
이 프레젠테이션에서는 JSL을 사용하여 JMP와 유사한 사용자 인터페이스를 스크립팅하는 방법, 주로 사용하는 템플릿 유형, 그리고 이러한 플랫폼을 개발할 때 내리는 결정들을 보여드리겠습니다. 또한 다양한 디스플레이 박스, JSL을 이용한 사용자 인터페이스 생성 방법, 스크립트 템플릿, 사용자 인터페이스 스크립팅 시 사용하는 의사 결정 과정, 그리고 JMP 스크립팅에 대한 몇 가지 팁과 모범 사례를 시연합니다.
구조화된 JSL을 사용하여 사용자 인터페이스를 구축하는 것에 대한 제 포스터 발표에 오신 것을 환영합니다. 간단히 제 소개를 드리겠습니다. 저는 핀란드의 전자 회사에서 데이터 통합 및 데이터 과학 전문가로 일하고 있습니다. 제 업무 중 하나는 맞춤형 JMP 애플리케이션을 만드는 것인데, 이 포스터는 제가 이러한 애플리케이션을 만드는 방법, 또는 더 정확히 말하면 애플리케이션 내 콘텐츠를 구조화하는 방법에 대한 것입니다. 원래는 논문으로 발표할 예정이었지만, 빠르게 진행해야 했기 때문에 포스터로 제작하게 되었습니다. 하지만 문제없이 발표할 수 있을 거라고 생각합니다.
자, 시작해 볼까요? 이 포스터에서 가장 중요한 점은 JMP 플랫폼을 모방해야 한다는 것입니다. 그 이유는 사용자들이 JMP에 매우 익숙하기 때문입니다. JMP처럼 콘텐츠를 구성하는 방식을 비슷하게 만들면 사용자들이 훨씬 빠르게 도구를 사용할 수 있게 됩니다.
여기 JMP 플랫폼의 한 가지 예시가 있습니다. 이 예시는 매우 간단한 배포판입니다. 왼쪽에는 실행 창이 있고 오른쪽에는 보고서 창이 있습니다. 실행 창과 보고서 창 모두에 창 제목 아이콘이 표시되며, JMP는 콘텐츠를 패널 상자로 구성합니다. 왼쪽에는 필터 열 선택기에서 열 선택기를 생성할 수 있습니다. 그 아래에는 경우에 따라 추가 옵션이 표시됩니다.
가운데에는 버튼들이 있습니다. 그 옆의 두 버튼은 사용자가 분석하거나 작업을 수행할 열을 선택할 수 있는 열 목록 상자입니다. 기본 제공되는 이름만 봐도 각 열의 용도를 알 수 있습니다. 오른쪽에는 작업 버튼들이 있습니다.
보고서의 구조는 일반적으로 매우 수직적입니다. 이 경우에는 제 의견을 더 쉽게 볼 수 있도록 법령을 포함했습니다. 콘텐츠는 부모-자식 구조, 즉 계층 구조로 되어 있으며, 빨간색 삼각형으로 표시된 윤곽선 상자를 사용하여 구성했습니다. 사용자가 이 빨간색 삼각형을 통해 아키텍처 및 분석 도구를 실행할 수 있도록 이러한 구조를 시도하고 있습니다. 콘텐츠는 상자, 표 상자 등으로 구성되어 있습니다. 이러한 구조는 JMP 사용자들에게 익숙한 형태입니다.
도구를 구상할 때, 사용자가 도구를 어떻게 사용할지 생각해 보세요. 예를 들어 스토리보드를 활용할 수 있습니다. 꼭 이 그림처럼 정교하게 만들 필요는 없습니다. 만화 형식으로 표현해도 좋습니다. 사용자가 먼저 화면을 보고, 무언가를 클릭하면 다음 화면으로 넘어가는 방식도 괜찮습니다.
이 기능을 구현할 때는 JMP 플랫폼이 어떻게 작동하는지 생각해 보는 것이 도움이 됩니다. 그러면 익숙한 방식으로 구현할 수 있기 때문입니다. 자세한 설명은 생략하겠습니다. 이것은 단지 구현 방법의 예시일 뿐입니다.
몇 가지 목업 예시입니다. 인터페이스에 대한 빠른 시연이나 초기 디자인을 보여줄 수 있습니다. 여기 아주 간단한 종이 버전이 있습니다. 저는 이런 간단한 버전으로 시작하는 것을 좋아합니다. 수정이나 업데이트가 빠르고 간편하며, 문제가 있을 경우 다시 만들 수도 있습니다. 보통은 JMP 전문가에게 바로 도움을 요청합니다. 이 목업은 매우 단순하지만, 한번 사용해 볼 만합니다. 이건 작동하고 이건 작동하지 않으니 필요에 따라 수정하면 됩니다. 제 템플릿을 사용해서 좀 더 깔끔한 목업을 만들어 실제 모습이 어떨지 확인해 볼 수도 있겠습니다.
다음 목업입니다. 비슷한 영역인데, 먼저 종이에 스케치를 한 다음 별도의 도구를 사용했습니다. 이 경우에는 Excalidraw라는 프로그램을 사용했습니다. 목업을 만들어 보겠습니다. 여기에 추가적인 메모를 넣거나 JMP를 사용한 좀 더 고급스러운 프로토타입 시연을 할 수도 있습니다. 이 부분은 프로토타입 제작 프로그램에서 이미 가져온 것이지만, 일부만 가져와서 활용할 수도 있습니다.
데이터 필터와 그래프 작성 도구가 있습니다. 이 부분은 완전히 분리해도 됩니다. 이미지도 몇 개 있는데, 레이아웃을 방금 구성했다면 그 이미지들을 별도의 도구로 옮기세요. 저는 아마 파워포인트를 사용할 것 같습니다. 파워포인트에서는 이미지를 쉽게 옮길 수 있거든요. 거기서 구조를 잡고 사용자 인터페이스가 어떻게 보일지 전체적인 구상을 할 수 있습니다.
다음으로, 템플릿을 활용하는 것을 고려해 보세요. 사용자 경험 또한 잊지 마세요. 저는 스크립팅 스타일의 템플릿을 직접 만들어 사용하고 있습니다. 이렇게 하는 이유는 앱 개발 속도를 높이기 위해서입니다. 템플릿은 더 안정적이고 전문적인 느낌을 줍니다. 한 가지 더 말씀드리자면, 저는 대부분의 사용자가 여전히 풀 HD 해상도를 사용하고 있기 때문에, 제 사용자 인터페이스는 그보다 높은 해상도, 정확히는 풀 HD보다 작은 해상도를 고려하지 않고 디자인합니다.
사용자 경험. JMP는 매우 상호작용적인 도구이기 때문에 사용자 경험을 고려하는 것이 중요하다고 생각합니다. 단순히 인터페이스뿐만 아니라 전반적인 사용자 경험을 고려해야 합니다. 좋지 않은 사용자 경험의 몇 가지 예를 들어보겠습니다. 그중 하나는 모델 창입니다. 예를 들어 플랫폼 LAN 공유의 경우, 모델 창에서 사용자가 데이터 테이블로 돌아가서 어떤 열을 사용해야 하는지 확인할 수 없습니다. 런처를 닫고, 테이블을 닫은 다음 런처를 다시 실행해야 합니다. 제 생각에는 이것은 좋지 않은 사용자 경험입니다.
또 다른 문제는 접을 수 있는 윤곽선 상자 등을 사용하면 창 크기가 자동으로 조정되는 경향이 있다는 것입니다. 저는 창이 처음 생성된 후에는 크기를 고정하고 스크롤 상자를 사용하여 이동할 수 있도록 합니다. 마지막으로, JMP에서는 여러 플랫폼을 동시에 실행할 수 있기 때문에 도구 모음과 메뉴를 사용자에게 숨기지 않는다는 점도 문제입니다. 하나의 플랫폼을 열어둔 상태에서 도구 모음 메뉴를 통해 다른 플랫폼을 실행할 수 있어 분석 속도가 훨씬 빨라집니다.
제 플랫폼과 JMP 플랫폼을 비교해 보겠습니다. 위쪽에는 JMP 플랫폼이 있습니다. 이 경우 플랫폼 범위가 좁고, 아래쪽에는 JMP 플랫폼과 상당히 유사한 형태입니다. 왼쪽 열에는 선택기가 있고, 그 아래에는 사용자가 추가하는 공통 목록이 있으며, 오른쪽에는 작업 목록이 있습니다. 런처와의 가장 큰 차이점은 제 플랫폼에는 현재 분석 중인 테이블 이름이 있다는 점입니다. Maneuver 플랫폼에서는 애플리케이션 이름도 표시될 수 있지만, 이 플랫폼에서는 그렇지 않습니다.
하지만 보고서와는 달리 제 경우에는 더 큰 차이점이 있습니다. 저는 이미 사용자에게 필요한 모든 옵션을 정의해 놓았기 때문에 별도의 설정 상자가 필요하지 않습니다. 사용자는 빨간색 삼각형 메뉴에 접근할 필요가 없습니다. JMP 플랫폼에서는 이러한 메뉴에 접근해야 합니다. 저는 페이지 상자와 시트 상자를 사용할 수 있습니다.
제 생각에 더 중요한 점은 제가 콘텐츠를 가로로 구성할 수 있다는 것입니다. 저희 화면은 가로로 넓고 세로로 길기 때문입니다. 많은 JMP 플랫폼들이 세로로 길게 나오는 경향이 있죠. 저는 화면이 작아서 공간을 더 효율적으로 사용할 수 있도록 가로로 구성하는 것을 선호합니다. 그리고 여기에서도 표와 애플리케이션 이름이 잘 보입니다.
여기 예시 애플리케이션 하나가 있습니다. 두 가지 예시를 보여드릴 예정이지만, 간단히 설명드리겠습니다. 이 스크립트는 사용자가 제 애플리케이션을 실행하기 위해 사용하는 스크립트입니다. 스크립트의 각 부분을 담당하는 부분들을 분리했습니다. 설정, 유틸리티, 사용자 인터페이스는 각각 별도의 스크립트에 넣어 관리하기가 더 쉽다고 생각합니다.
다음은 스크립트입니다. 이 메인 스크립트는 테이블이 열려 있는지, 창이 이미 열려 있는지, 그리고 이 모든 조건이 충족되면 애플리케이션이 실행 중임을 나타내는 초기 텍스트를 표시합니다. 확인 절차에 따라 모달 창 관련 오류를 사용자에게 표시할 수도 있습니다. 예를 들어, 창이 이미 열려 있고 모달 창이 아닌 경우, 애플리케이션을 전면으로 가져와 사용자가 기존 창을 계속 사용할 수 있도록 합니다.
아래는 애플리케이션 실행 후 나타나는 기본 창입니다. 이렇게 하면 애플리케이션 창이 생성됩니다. 여기서는 각 요소들을 별도의 표현식으로 분리했습니다. 새 창 밖에 작은 표현식들을 배치하는 것이, 수백 줄에 달하는 긴 표현식을 새 창에 배치하는 것보다 훨씬 관리하기 쉽습니다. 긴 표현식은 보통 관리하기가 어렵죠. 이렇게 하면 훨씬 간편하게 다룰 수 있습니다.
때로는 여러 가지 평가와 다양한 기능을 수행해야 할 수도 있지만, 일반적으로는 이 방식이 더 낫다고 생각합니다. 커뮤니티에서 이 예시를 찾아볼 수 있으며, 2023년 핀란드 사용자 그룹에서 발표했던 자료에서도 몇 가지 추가 예시를 확인할 수 있습니다.
이 포스터에 대한 간단한 요약입니다. 사용자들이 이미 익숙한 JMP 플랫폼의 실행 및 보고서 방식을 모방하세요. 그러면 사용자들이 여러분의 도구에 더 빨리 익숙해질 수 있습니다. 사용자가 애플리케이션을 어떻게 사용할지 고려하세요. 스토리보드와 목업을 만들어 어떻게 보일지 빠르게 확인하세요. 템플릿을 추가하면 견고하고 전문적인 반복 실행 애플리케이션을 만들 수 있습니다. 가장 일반적인 표시 상자와 JSL에서 콘텐츠를 구성하는 방법을 숙지하세요.
JMP는 매우 상호작용적인 도구이므로 사용자 경험을 소홀히 하지 마십시오. JMP의 상호작용성은 매우 중요합니다. 사용자 경험과 사용자 인터페이스를 고려해 주시기 바랍니다. 감사합니다.
