유저 : 안녕? 너희들이 만든 상호작용하는 지도가 진짜 멋진데 어떻게 만든건지 알고 싶어! (가능하다면 어떤 프로그램으로 만들었는지 등..) 디자이너 친구! 정말 고마워! 


내가 게시물을 여기에 잘못올렸다면 올바른 보드로 다시 옮겨줘! 고마워!






라이엇 네벌루나(사용자경험 코디네이터 (UX Coordinator) : 안녕?

디자인 팀은 네 질문에 답하기 위해  종이 프로토타이핑, 사용자 이동 및 흐름, 신뢰도가 높은 모형 및 내부 Rioter로 테스트할 때 사용했던 디지털 프로토타입을 사용하여 지도 환경을 구축했어. 제작초기에는 지도를 구상하기위해  Adobe XD, Photoshop 및 시제품 제작용 Invision과 같은 소프트웨어를 통해 만들었어. 거기서부터, 우리의 테그 아티스트들이 그것들을 코드로 변화시켰지! 내가 가서 라이엇 바이오마커를 불러와서 설명 해줄게!

또 말해줄게 있다면, 우리는 라이엇게임즈 내에 존재하지만 유저들이 전에는 본 적이 없는 내부 일러스트들과 컨셉 아티워크들에 대해 큰 컨텐트 감사(체크)를 했어. 우리의 목표는 룬테라의 세계를  유저들을 위한 살아 숨쉬고 즐기는 장소로 만드는거야

아티스트들이 손으로 그린 레이어와 지도를 위해 포토샵을 이용하여 생물이 발광하는 것처럼 지도 속 룬테라 세계를 더욱 실감나게 하기 위해 상징적인 랜드마크들을 배치해두었는데 , 보이지? 

우리는 네가 지도를 좋아해줘서 기뻐 ^^




라이엇바이오마커(기술 디자이너 (테크아티스트) : 쨘! 소환완료! 
안녕 친구? 난 지도를 만들었던 개발자 중 한명인데, 네가 무슨 프로그램을 사용하는지 잘 모르지만, 편안하게 물어봐! 

3D 지도 자체는 3js(웹에서 3D 장면을 실행하기 위한 멋진 라이브러리)를 사용하여 만들었어. 지도는 타일 뭉치로 구성되어 있는데, 3D로 만들기 위해 지형에 얼마나 높이 렌더링해야 하는지 나타내는 흑백 이미지를 사용해. 픽셀이 흰색에 가까울수록 더 커져. 

사이드바, 네비게이션 및 이미지 보기등과 같은 것들은 React에서 구축해. Redux를 사용한 공간(기본적으로 모든 데이터의 글로벌 객체)을 메우기 위해선 여전히 지도와 상호작용을 해야해. UI와 3D 맵은 모두 Redux에서 데이터를 읽을 수 있으므로 렌더링해야 할 항목을 알 수 있어

이건 지도 뒤의 첨단 기술인데, 네 질문에 모든걸 답해줄수있어 기뻐!


출처 : https://boards.na.leagueoflegends.com/en/c/story-art/9vvpVNi6-interactive-map-help?comment=0001