앱 개발 과정

저자는 ‘Billionaire’ 보드게임의 ‘Analyzer’를 재현하기 위해 Ruby on Rails를 활용한 모바일 앱을 개발했습니다. 이 프로젝트는 단순한 앱을 넘어 향후 다양한 보드게임 헬퍼를 통합하는 라이브러리로 확장될 가능성을 염두에 두었으며, 다음 명령어로 초기 Rails 앱을 생성했습니다: rails new board_game_library --css tailwind --database=postgresql 스타일링에는 Tailwind CSS를 활용하여 개발 효율성을 높였습니다.

핵심 구현 요소

앱은 크게 세 가지 핵심 구성 요소로 이루어져 있습니다:

• 뷰(View) 생성: ‘Analyzer’ 기능을 시각적으로 제공하는 인터페이스.

• Stimulus 컨트롤러: ‘Analyzer’의 무작위 스크램블링 로직 처리.

• ngrok 노출: 휴대폰에서 앱에 무료로 접근할 수 있도록 설정.

뷰(The View) 상세

뷰는 게임의 ‘Analyzer’ 기능을 모방한 간단한 인터페이스로 구성됩니다.

• 스피너(Spinners): 두 개의 div 요소가 나란히 배치되어 있으며, data-analyzer-target="left" 및 data-analyzer-target="right" 속성을 가집니다. 초기 색상으로 사용자가 결과를 예측할 수 있도록 합니다. ```html

  ```

• 스피너 버튼(Spinner button): 무작위화 기능을 시작하는 버튼으로, `data-action=”click->analyzer

randomize”를 통해 Stimulus 컨트롤러의 randomize` 메서드를 호출합니다.

• 액션 차트(Actions Chart): 스피너 결과에 따른 행동 지침을 시각적으로 보여주는 HTML 요소들의 집합입니다.

컨트롤러(The Controller) 상세

Stimulus 컨트롤러는 스피너의 무작위화 로직을 담당합니다. 주요 메서드는 다음과 같습니다:

• randomize(): ‘Analyze’ 버튼 클릭 시 호출되어 무작위화 및 애니메이션을 시작합니다.

• disableButton() / enableButton(): 무작위화 과정 중 버튼의 활성화/비활성화를 제어합니다.

• randomAnimation(): 좌우 스피너의 애니메이션을 시작합니다.

• makeDecision(): 각 스피너가 50% 확률로 빨간색 또는 초록색 중 하나를 결정합니다.

모바일 접근성 확보

앱을 휴대폰에서 쉽게 사용하기 위해 ngrok의 무료 버전을 활용했습니다. Rails 앱이 ngrok을 통해 올바르게 작동하도록 config/application.rb 파일에 다음 한 줄을 추가했습니다: config.hosts << ".ngrok-free.app" 이 설정을 통해 .ngrok-free.app으로 끝나는 모든 호스트가 애플리케이션에 접근할 수 있게 되어, ngrok 주소가 변경되어도 별도의 설정 없이 사용할 수 있습니다. Rails 서버와 ngrok을 실행한 후 휴대폰으로 접속하면 최종 결과물을 확인할 수 있습니다.