안녕하세요. RGT의 SW 개발자 채용 단계인 기술 과제를 요청받은 김준영입니다. 기술과제로서 구현을 요청받은 기능은 3가지입니다. 다만 각 문제의 설명이 다소 구체적이지 않아, 문제를 선별하였을 당시에 출제자가 해당 문제를 통해서 확인하고 싶은 지원자의 역량이 무엇일지 되새겨 보면서 작업해보았습니다.
저는, 요청받은 각 기능을 모두 구현하여 하나의 작업물로 합쳐보았습니다. 제 작업물의 중심축이 되는 두번째 문제에서 설명을 시작하겠습니다.
과제 pdf상 두번째 문제는, 정의된 건물 공간 (10x10) 에서 로봇이 시작점 (0,0) 에서 도착점 (9,9) 까지의 경로를 따르도록 하되, 통신해야 하는 각각의 기기들 ([(2, 3), (5, 5), (8, 2)]) 을 경유하는 경로를 찾도록 하는 것입니다. 따라서 저는
- 건물의 크기
- 시작점 위치
- 도착점 위치
- 경유지 위치
가 주어졌을 때 해당하는 경로를 찾고 그것을 시각화하기로 했습니다.
과제 pdf상 첫번째 문제는, 사용자로부터 입력을 받아 결과를 동적으로 보여주는 웹 페이지를 구현하는 것입니다. 사용자의 입력을 토대로 결과를 변경하려면 자바스크립트를 활용할 줄 알아야 하기에, 이 문제의 출제 의도는 자바스크립트 활용 능력을 묻는 것으로 보입니다. 구현 예시로 “예를들면 사용자가 제품 색상을 선택하면 해당 색상의 제품 이미지를 보여주세요” 라고 되어 있습니다.
하지만 이는 조금 심심할 것 같아서, 저는 여기서 좀 더 심화하여, 두번째 문제를 풀기 위한 조건 사항들 (건물의 크기, 시작점, 도착점, 경유지, 장애물) 을 사용자가 입력할 수 있도록 했고, 그 입력 조건에 따라서 루트를 찾고 시각화하여 보여주기로 했습니다.
과제 pdf상 마지막 문제는, 데이터를 시각화하는 대쉬보드를 구현하는 것입니다. 예시로 전달받은 하드코딩된 데이터들로 대쉬보드를 구현하는 것 또한 심심할 것 같아서, 이 또한 조금 변형을 가하였습니다. 하나의 로봇이 아니라 알고리즘에 저마다 다른 튜닝이 적용된 여러 로봇들에게 루트를 찾도록 했고, 각 로봇들이 루트를 완성하기까지 소요된 시간들을 그래프 로 시각화하여, 어떤 로봇이 더욱 좋은 성능을 발휘하는지 인사이트를 제공할 수 있도록 하였습니다.
위 요구사항들을 간단히 요약하면, “경로를 구할 전제 조건을 동적으로 유저로부터 입력받아 여러 로봇들이 경로를 구하도록 한 다음, 각 로봇 별 소요된 시간을 그래프로 표시하는 웹페이지”를 구현하는 것입니다.
cd RGT
npm install
npm run dev웹페이지 상에서 건물의 크기와 시작점, 도착점 좌표를 설정하고 “Update Grid” 버튼을 클릭하면 경로를 찾을 그리드 맵이 생성됩니다.
생성된 그리드의 각 셀들을 경유지나 이동이 불가능한 장애물 지점으로 만들 수 있습니다.
셀 한 번 클릭 : 해당 셀을 경유지로 설정
셀 두 번 클릭 : 해당 셀을 방해물로 설정
셀 세 번 클릭 : 원상복구
전제 조건 설정을 마친 후, “Find Paths” 버튼을 클릭하면 각 로봇들이 해당 조건들을 만족하는 루트를 찾아 보여줍니다. 그리고 각 로봇들이 루트를 찾기까지 소요된 시간을 바 그래프로 하단에서 보여줍니다.
“Update Grid” 버튼을 눌러서 여러 번 실행해 볼 수 있습니다.
한정된 시간 속 여러 기업의 기술 과제를 진행하느라 부족함이 많은 작업물이지만, 날카롭되 너그러이 평가해주면 감사하겠습니다.
일교차 감기 조심하세요.