[현장 업무 앱 만들기] 6편
안녕하세요! AiApp을 만드는 엠바스의 신입 개발자입니다.
지난 편 마지막에 현장 담당자가 이 앱을 기기에 담아 쓸 수 있는지 알아보겠다고 적어 두었습니다. 그 이야기입니다. 코드는 한 줄도 쓰지 않는 것과 개발 용어 없이 채팅으로만 진행하는 것, 두 조건은 이번 편에도 그대로 갑니다.
지금까지 다섯 편에 걸쳐 만든 것은 사무실과 현장이 같이 쓰는 앱입니다. 사무실은 PC로 목록을 관리하고, 현장은 창고를 돌아다니며 물건을 확인합니다. 그런데 현장 쪽에는 매번 걸리는 것이 하나 있었는데, 인터넷 주소를 손으로 쳐서 들어가야 한다는 점입니다.
장갑을 낀 손으로 좁은 주소창에 긴 주소를 넣는 일은 사무실에서 생각하는 것보다 번거롭습니다. 다른 앱들처럼 바탕화면 아이콘을 한 번 누르면 바로 열리는 쪽이 맞습니다. 문제는 그걸 어떻게 요청하느냐였습니다.
방법 대신 결과만 적어 보내기
방법을 아는 상태로 요청하면 이번 편에서 확인하려던 것이 사라집니다. 그래서 어떻게 만드는지는 한 글자도 적지 않고 원하는 모습만 적었습니다. 현장에서 쓰는 사람들은 창고를 돌아다니며 기기로 쓴다, 지금은 주소를 매번 쳐서 들어가야 해서 현장에서 잘 안 된다, 바탕화면에 아이콘이 하나 생겨서 누르면 바로 검수 화면이 뜨면 좋겠다.
그 뒤에 붙인 한 줄. 다른 앱들처럼요. 방법을 모르는 사람이 할 수 있는 설명은 여기까지입니다.
코딩 없이 앱 만들기를 다섯 편 해 오면서 요청 문장은 계속 짧아졌습니다. 1편에서는 무엇을 만들지부터 길게 적었는데 이번에는 불편한 상황과 원하는 모습, 두 가지뿐.
계획서가 미리 적어 둔 한계 읽기
계획 모드로 보냈더니 계획서가 요청을 성공 기준 네 가지로 정리해 왔습니다. 기기에서 바탕화면 추가가 될 것, 아이콘을 눌렀을 때 주소창 없이 뜰 것, 처음 뜨는 화면이 현장 흐름일 것, 검수 담당자가 사무실 화면을 거치지 않을 것.
제가 적은 것은 불편한 상황과 원하는 모습이었는데 확인할 수 있는 항목으로 바뀌어 돌아왔습니다. 이 앱에는 지금 바탕화면에 담는 데 필요한 정보가 하나도 없다는 진단도 함께 붙어 있었고요. 그 아래에 한계 세 줄이 적혀 있었는데, 세 번째 줄이 눈에 걸렸습니다.
브라우저가 알아서 설치를 권하는 안내는 다른 기능이 함께 있어야 나오는 경우가 있어서, 처음에는 브라우저 메뉴로 직접 추가하는 안내에 의존하게 된다는 내용입니다.
5편에서도 계획서가 위험을 미리 적어 두었고, 그 문단이 그대로 점검 목록이 됐습니다. 이번에도 같은 자리였지만 성격이 조금 달랐습니다. 5편의 경고는 구현이 끝난 뒤 제가 눌러 봐야 확인되는 것이었고, 이번 경고는 그 경우까지 화면을 따로 만들어 둔 것이었습니다. 뒤에서 확인합니다.
이름과 아이콘을 정하는 자리
계획서가 되물은 것은 세 가지. 기기가 어느 쪽인지, 창고에서 통신이 끊기는 일이 잦은지, 회사 로고 파일이 따로 있는지였습니다.
세 번째 되물음 아래에는 답이 없을 경우까지 적혀 있었습니다. 로고 파일이 없으면 지금 쓰는 색과 모양으로 아이콘을 만들겠다는 것. 되물음에는 답하지 않고 추천안 그대로 시작했습니다. 1편부터 지켜 온 진행 방식입니다.
앱 이름도 제가 정하지 않았는데, 계획서가 화면에 이미 쓰이는 이름을 그대로 쓰겠다고 적어 두었고 실제로 그 이름이 바탕화면에 올라갔습니다.
만들어진 결과 확인하기
구현이 끝나고 브라우저로 로그인 화면을 열었습니다. 화면 맨 위에 옅은 띠가 하나 생겨 있었는데, 바탕화면에 추가하면 앱처럼 바로 열 수 있다는 안내와 함께 설치 버튼이 붙어 있는 띠입니다.
이 띠는 로그인 화면과 현장 화면에만 뜨고 사무실 화면에는 없습니다. 사무실 담당자는 PC로 쓰니까 바탕화면에 담을 일이 없다는 뜻인데, 제가 요청한 문장에는 그런 구분이 없었습니다. 현장 담당자가 쓴다는 사정만 적었는데 어디에 안내를 띄우고 어디에 띄우지 않을지가 정해져서 나온 것.
기기에 담아 직접 눌러 보기
화면으로 보이는 것까지는 확인했지만 실제로 담기는지는 눌러 봐야 압니다. 기기를 꺼내 로그인 화면을 열고 설치를 눌렀습니다.
바탕화면에 아이콘이 하나 생겼습니다. 보라색 바탕에 흰 선으로 그린 모양이고, 아이콘 밑에는 짧게 줄인 앱 이름이 붙어 있는 형태입니다. 다른 앱들 사이에 놓고 보아도 따로 만들지 않은 티가 나지 않았습니다.
눌러서 열어 보니 주소창이 없습니다. 탭도 없고 브라우저 표시도 없이 화면이 위쪽 상태 표시줄 바로 아래에서 시작하는데, 상태 표시줄 색까지 앱 색으로 바뀐 상태입니다.
성공 기준 네 가지 중 두 가지가 여기서 확인됐습니다. 남은 것은 처음 뜨는 화면과 담당자가 도착하는 자리.
안내가 스스로 갈라지는 지점
아이콘으로 열린 화면에는 아까 봤던 안내 띠가 없었습니다. 이미 담아서 쓰고 있으면 띠가 저절로 사라지게 되어 있었던 것입니다.
계획서의 세 번째 한계 줄이 여기서 회수됩니다. 브라우저가 설치를 권할 수 있는 상태면 띠에 설치 버튼이 뜨고, 권할 수 없는 상태면 버튼 없이 브라우저 메뉴로 직접 추가하라는 문장이 뜨고, 담고 나면 둘 다 사라집니다. 세 가지 경우가 각각 다른 화면으로 준비되어 있었고, 저는 그중 어느 것도 요청하지 않았습니다.
계획서에 적힌 한계는 못 하는 일의 목록이 아니었습니다. 그 경우에 어떻게 할지까지 함께 만들어 둔 예고. 5편에서 얻은 사용법이 구현이 끝난 뒤 경고 자리를 눌러 보는 것이었다면, 이번 편에서 얻은 것은 한계 문장을 그 경우의 화면이 어디 있는지 찾는 실마리로 읽는 것입니다.
담당자가 도착하는 자리 확인하기
마지막으로 검수 담당자 계정으로 로그인해 봤습니다. 이 앱은 첫 화면에서 사무실과 현장 중 어느 쪽으로 갈지 고르게 되어 있는데, 담당자가 매번 그 화면을 지나가는 것은 번거로운 일입니다.
로그인하니 고르는 화면을 거치지 않고 곧바로 작업할 계획을 고르는 화면이 나왔습니다. 화면 위쪽에는 현장용임을 알리는 표시가 붙어 있고, 여기서 바로 물건을 확인하는 흐름으로 이어집니다.
성공 기준 네 가지가 모두 확인됐습니다. 화면을 새로 만들지도 않고 저장하는 정보를 늘리지도 않았는데 앱을 쓰는 형태가 바뀐 것.
1편에서 화면을, 2편에서 규칙을, 3편에서 데이터를, 4편에서 되돌리는 길을, 5편에서 고르는 값을 채팅만으로 적용해 왔습니다. 이번 편에서 적용한 것은 앱을 쓰는 형태입니다. 기능을 새로 늘린 것이 아니라 이미 있던 화면을 현장 손에 들려 준 것이고, 그 일에 필요했던 것은 만드는 방법이 아니라 원하는 모습이었습니다.
여기까지가 이번 편입니다. 다음 편에서는 현장에서 실제로 물건을 확인하는 작업을 만들어 보겠습니다.
