글을 읽는 분들에게 미안한 마음이 들지만 앞단에 진행되던 내용들도 뭐 나름 의미가 있기는 하다. 003 글 마지막에 template 기본을 만들어주는 기능을 발견하고 바로 작성하던 글을 종료시켰다. 그럼 새롭게 알아낸 방법으로 template를 만들어보기로 하자. https://wails.io/docs/guides/templates/
앞에서 등록한 글들에서 본 폴더/파일 구조와 별반 다르지 않다고 느낄 수 있는데 자세히 보면 설정 파일들의 파일명이 다르다는 걸 알 수 있다. package.tmpl.json , app.tmpl.go , go.tmpl.go , main.go.tmpl , wails.tmpl.json 이렇게 tmpl이라는 문구가 추가되어 생성되어 있다.
wails.tmpl.json
대표적으로 wails.tmpl.json 파일을 오픈해보면 변경될만한 정보들이 {{ }} 로 감싸져 있는 걸 볼 수 있다. 이 부분이 -t 옵션으로 프로젝트를 생성하게 되면 상황에 맞는 값들이 대입되어 온전한 wails.json 파일이 생성되게 된다. 그런데 template 프로젝트를 생성 후 frontend 폴더를 보면 frontend 소스가 없고 dist 폴더와 package.tmpl.json 만 있는 걸 볼 수 있다. dist는 frontend 폴더에 개발을 하면 빌드 시 재 구성되는 부분이라 확인할 필요가 없고 package.tmpl.json은 개발에 사용할 의존 모듈들에 대한 정의들이 정의된 설정 파일이다. 개발된 샘플 소스가 없다. template 프로젝트를 생성할 때 -frontend 옵션이 있는데 별도로 구성된 javascript 프로젝트를 frontend로 포함시켜서 템플릿을 완성시켜 주는 기능이 포함되어있다. 나는 sveltekit + vite +typescript + tailwind 를 사용할 예정이므로 이 네 가지를 적용한 프로젝트를 별도로 만들어보겠다.
sveltekit을 설치하기 위해 사이트에 접속해 보자. 그럼 다음 내용을 확인할 수 있다.
나는 npm을 사용하지 않고 pnpm을 사용할 것이므로 위 내용과는 조금 다르게 프로젝트를 생성하겠다.
pnpm create svelte@latest sveltekit-template
문답형 설치가 진행된다.
Skeleton Project로 템플릿을 생성하니 너무 없어 보여서 SvelteKit demo app으로 선택하기로 한다.
Typescript 를 사용할 예정이므로 두 번째 항목을 선택한다 (본인이 만들 템플릿에 따라서 선택하면 된다. No는 VanillaJS를 의미한다.)
ESLint (Option) Prettier (Option) Playwright (Option) 위 세 가지 선택 여부를 결정하고 프로젝트를 생성한다. (위 3가지는 검색해서 한번 알아보도록 하자)
프로젝트가 생성되면서 다음 절차를 통해서 실행해볼 수 있다는 문구가 나타난다. (npm을 pnpm으로 바꾸고 pnpm에서는 run 명령어를 생략해도 되므로 run을 생략하고 실행해보자(4 번에서) 그리고 git 사용 여부는 본인 선택이므로 사용할 거면 git 설치 부분을 학습하고 설치 후 3번을 진행하도록 한다. 단 지금은 템플릿을 만드는 단계이므로 맨 마지막에 진행해도 상관없을 것 같으므로 지금은 3번은 스킵하도록 한다.
cd sveltekit-template
pnpm install
pnpm dev -- --open
pnpm install 실행 중 corepack을 통한 update를 하라고 하는데 지금 정확히 잘 모르겠다. 추후 알게 되면 해당 글에 업데이트하도록 하겠다.
다음과 같이 devDependencies에 의존성 모듈들이 추가되었다고 나타난다. 모두 최신 버전인 것 같다. (Skeleton 으로 생성했을 때와는 의존성 모듈 구성이 조금 틀리니 이상하다고 겁먹지 말자) 이제 정상적으로 구동이 되는지 실행해보자. pnpm dev -- --open
devDependencies가 추가되었는데 svelte-preprocess 부분은 이미 등록되어 있어서 누락되었다.
pnpx tailwindcss init tailwind.config.cjs -p
두 가지 cjs 파일이 생성되었다. 이제 사용할 모든 프레임워크와 모듈이 추가되었으므로 wails 템플릿을 다시 만들어보자.
02. frontend Project로 wails template 생성하기
cd ..
wails generate template -name wails-vite-sveltekit-ts-tailwind-template -frontend ./sveltekit-template
sveltekit-template 폴더 상위로 이동한 후 template 을 생성해보자.
정상적으로 생성되었다. 알기 전까진 꽤 어렵게 생각되었는데 구조를 알고 나니 큰 어려움 없이 사용자 Template를 생성할 수 있었다. 그렇지만 아직 끝난 게 아니다. 일단 템플릿 형태이기 때문에 wails build 해서 바로 실행할 수 있는 구조가 아니다 . wails 의 -t 옵션을 통해서 프로젝트를 생성해 줘야 정상적인 값이 설정된 프로젝트가 생성되기 때문이다. 그리고 wails로 template를 생성하면 기본적으로 npm을 사용하는 구조로 생성된다. 그래서 wails.tmpl.json 파일을 열어서 npm 부분을 수정해주자.
다른 템플릿들을 보면
다음과 같은 옵션들이 있는데 추가해주자 : 추가하지 않으니 실행이 안된다. 두 번째 template.json 파일 내용을 수정하도록 한다.
내용을 보고 자신에게 맞는 구성으로 수정해서 등록하도록 한다. READMD.md 파일과 NEXTSTEPS.md 같은 파일들을 자신에 맞게 수정 후 저장한다. 자 일단 github에 올려보자. open 할 template이기 때문에 Repository 등록할 때 public으로 등록해야 한다. git을 잘 사용하시는 사람은 git 명령어로 빠르게 처리해도 좋고 좀 미숙한 사람들은 VSCode에 있는 기능을 이용해 자신의 Repository에 등록하면 된다.
Initialize Repository 버튼을 클릭하면 현재 Project에 git init 가 실행되어 git 적용 환경이 된다.
상단 Message 부분에 "Initialize Template" 를 입력하고 Commit 버튼의 오른쪽 화살표를 클릭해 Commit & Sync 항목을 클릭한다.
3개 파일이 저장이 안 되었다고 저장 후 Commit을 진행한다고 한다. 각자 상황에 따라 메시지가 다를 테니 적절히 대처한다.
public repository를 선택한다.
저장소가 없던 게 생겼다. 그렇지만 클릭해 보면 정상적으로 소스가 upload가 안되었을 것이다. 다시 한번 Message 부분에 "initialize template" 등록 후 commit & Sync 버튼을 클릭해보자
여차저차 해서 정상적으로 개인 github에 등록이 되었다. github에 관한 내용은 음.. VSCode로던지 직접 git 명령어로 등록하던지 별도로 학습해서 적용해보도록 하자. VSCode로 적용하는 게 생각보다 쉬우니 적용해보자. 이제 Template가 github에 등록이 되었으니 wails 의 -t 옵션으로 정상적으로 프로젝트를 생성할 수 있는지 확인해 본다. 공식적인 template가 아니므로 github 저장소 주소를 가져와서 프로젝트를 생성해야 한다.
프로젝트가 정상적으로 생성되었다. 파일명도 tmpl 명칭이 빠졌고 설정값들도 정상적으로 적용되어 있다. 이제 구동이 되는지 확인해보자. VSCode에서 Ctrl + ` 를 이용하면 TERMINAL을 사용해 CMD 를 사용하는 것과 같은 기능을 사용할 수 있다.
wails build
실행하면 wails build 부터 frontend 부분 빌드 및 번들링까지 해서 exe파일을 생성해준다. 그렇지만 지금은 exe파일을 실행하는 게 목적이 아니라 build를 통해 build, frontend/dist, frontend/node_modules 등등의 생성 폴더/파일이 필요해서이다. dist 폴더와 내부 파일들이 없으면 wails가 정상적으로 구동이 안된다. 이유는 main.go 에 설정되어있는 assets 부분 때문인데 추후 내용을 설명하기로 하겠다. 일단 build가 오류 없이 정상적으로 진행되어 종료되었다. 그럼 TERMINAL 창에 다음 명령어를 실행해보자.
wails dev
필요한 부분 빌드가 다시 진행되고 wails 프로그램이 실행되면서 sveltekit 내용이 wails에서 구동되면 완료이다!!! 빌드 후 실행이 안된다.. 뭐가 문젠가..?? 늦은 밤이라 내일 다시 확인해보기로 하겠다. 잘되는 것 같아 기분 좋았는데 갑자기 급우울이 오네. ========================================================= 문제점을 찾았다. wails.json 파일에
두 가지 항목을 추가해주자. wails dev 실행하면 정상적으로 실행되는 걸 볼 수 있을 것이다. 기능들을 많이 넣다 보니 소스가 너무 복잡하다. 역시나 우려했던 대로 오픈소스 진영 프로젝트는 설정 지옥이 되는 게 어쩔 수가 없다. 설정을 한 곳으로 모으는 무언가가 있었으면 좋겠는데 좀 아쉽다. 마지막으로 tailwind를 사용하기 위한 설정은 적용되어 있는데 어떻게 적용해서 사용하는지 확인이 되지 않았다. app.css 파일 추가 및 설정 layout.svelte 파일에 import 설정 추가 page.svelet 파일에 html 표현하기
3가지 적용에 대한 설명이 누락되었는데 너무 늦어서 일단 자야겠다. 사실 여기서 Template 만드는 방법은 종료를 해야겠다. 일단 시간이 없어서 개발을 우선순위로 둬야 하기 때문이다. 불필요한 파일 삭제는 마무리되었지만 설명 파일들 update도 해야 하고 잔잔하게 소스들 수정을 해야 완전히 끝나긴 하겠지만 지속적으로 조금씩 업데이트를 해나가는 방법으로 진행해야겠다. 자 그럼 이제부터 본격적으로 Graduate App을 만들어보도록 하자. https://devguru.tistory.com/27?category=588709
github Repository를 만들고 회사에서 테스트겸 템플릿 다운을 받으려고 했더니 SSL 문제 떄문에 프로젝트 생성이 안되는 문제가 확인되었다. 보안적으로 많은 부분이 막혀있는 곳이라 좀 문제가 많은데 wails init 를 통해 템플릿 형태로 프로젝트 생성하는건 허용이되고 있다. 이게 어떤 이유로 되는지는 잘 모르겠다. 뭐 그부분까지 확인하려면 많은부분들을 확인해보고 알아봐야 하는데 템플릿을 만드는 주제와는 무관하므로 스킵하도록 하겠다. 그래서 왜 -t 옵션으로 프로젝트 생성을 못하는지 확인을 해보니 다음 설정파일이 누락되어 있어서 안되고 있는걸 확인했다.
wails init -n wails-vite-sveltekit-ts-tailwind-template
cd wails-*
git init
(tip) cd 명령어에서 아스트링크(*)를 사용하게되면 뒤의 단어들을 생략할 수 있다. Project Templete 를 보면 vanilla 라고 되어 있는데 흔히들 바닐라JS 라고 하면 Javascript 기본을 바닐라JS라고 한다. git init는 git이 설치되어 있다면 적용할 수 있다.
현재 기준으로 wails 프로젝트를 생성하게되면 다음과 같은 폴더 구조를 가지게 된다.
폴더와 config 파일들을 자세하게 파보도록 하자.
최상위 폴더에는 다음 파일들이 있다.
.gitignore : git에서 소스관리를 하지 않을(ignore 할) 필터링 내용이 등록되어 있다. wails.json : wails 에서 관리되는 설정 README.md : 프로젝트 설명 파일 go.mod : go 에서 사용할 dependency정보 설정 go.sum : go 에서 사용하는 dependency 별 체크섬을 기록해두고 변조 여부를 검사하는데 사용 main.go : wails 실행 시 최초로 실행되는 main 함수가 포함되어 있는 source app.go : main에서 호출 해서 사용할 사용자 정의 함수들이 포함되어 있는 source
기본적으로 Root에는 다음과 같이 source가 세팅된다.
기본으로 설정된 프로젝트에서 각종 config 파일들을 변경해줘야 하는데 먼저 wails.json 파일을 수정하도록 하자.
초기 설정은 npm을 사용하게 되어 있다. 하지만 성능적인 부분이나 디스크 공간을 효율적으로 사용하는 pnpm을 사용하도록 한다.
wails-vite-svelte-tailwind-template 가 제일 적합한것 같았는데 typescript 가 빠져있었고 sveltekit이 적용이 안되었다. 게다가 관리를 안해서 그런지 프로젝트를 생성해서 구동을 해보면 정상적으로 실행이 안되고 각 config 들을 손을 좀 봐야 정상 작동을 하는 수준이있다.
그래서 해당 template를 fork 받아서 수정해서 쓰려고 했는데 svelte와 sveltekit 설정이 조금 상이해서 약간의 수정으로 처리하기가 좀 어려운감이 들었다. 물론 웹쪽에 아주 전문가 분들이라면 뚝딱뚝딱 수정해서 사용하기는 하겠지만....
그래서 진행하는 프로젝트는 wails-vite-svelte-tailwind-template를 수정해서 진행하기로 하고 template를 새롭게 구성해보겠다고 마음먹었다. template 만드는건 처음 해보는 시도이기도 하고 웹쪽의 각 기술들이 어떤식으로 조합해서 구성해야 하는지 기본부터 한번 해봐야 겠다는 생각도 들어서였다.
그래서 만드는 과정을 블로그에 기록하기로 하고 추후 다른 템플릿 만들때 참고 자료로 사용하면 좋을것 같아서 짬짬이 시간내서 진행하기로 한다.
아직 초창기여서 이런저런 문제점들이 있기는한데 계속 성장하는 모습들이 앞으로의 세대교체를 짐작하게끔 한다. 하지만 꽤 많은 시간이 걸릴것이다.이미 주류가 되어버린 Javascript가 너무 탄탄한데 언젠간 Javascript가 가지고 있는 구조적인 문제나 성능문제가 대두되면서 웹브라우저가 WASM에 더 비중을 실어줄것이고 기능 확대를 점진적으로 진행할 것이다. 하지만 진입점이나 학습곡선이 Javascript보다는 높은편이라 단기간에 기대할 수 있지는 않을꺼라 생각한다.
mod_wasm은 두 개의 라이브러리로 구성이 되어 있다
1. mod_wasm.so로 아파치 C API 와 러스트 라이브러리 사이에 인터페이스를 제공하여 웹어셈블리 런타임을 관리할 수 있다. 즉 아파치 구성 옵션 및 러스트 라이브러리와의 연결을 담당한다.
2. libwasm_runtime.so 라이브러리는 아파치의 HTTP 요청을 받아 웹어셈블리 모듈을 구성하고 실행한다. 응답을 파싱한 이후 mod_wasm.so에 다시 관리 권한을 넘겨준다.
웹어셈블리는 바이너리로 컴파일되어서 스택 기반 가상 머신으로 웹 애플리케이션이 높은 성능을 발휘할 수 있도록 도와준다. 한번 적용해보고 싶긴하다. 조만간 성능테스트 결과 같은게 나오면 소개해보겠다.
세계 최상급의 균형 잡힌 인체 공학이 세련된 디자인을 만나 더욱 편안한 헤드셋이 탄생했습니다.
혁신적인 혼합 현실
풀 컬러 혼합 현실과 Quest 2 대비 4배 높은 해상도로 실제 세상에서 존재감을 유지하면서 가상 세상에서 일하고, 창작하고, 협업할 수 있습니다.
자연스러운 표정
실시간 표정 추적을 통해 얼굴 표정을 모방하는 아바타를 만들 수 있습니다. 미소를 짓든, 눈썹을 치켜 올리든, 윙크를 하든 모두 가능하죠.
META QUEST TOUCH PRO 컨트롤러
컨트롤러당 카메라 3개와 Snapdragon 662 모바일 프로세서로 가상 공간에서 360도 움직임이 구현됩니다. TruTouch 햅틱 피드백과 정밀한 손가락 간격 조정 덕분에 보다 직관적으로 VR을 경험할 수 있습니다.
차세대 광학기기
비주얼 선명도가 향상되었다는 것을 바로 확인하실 수 있습니다. 광학 모듈 내부의 접이식 조명으로 작동되는 특허받은 혁신적인 팬케이크 렌즈와 광학 테크놀로지를 사용해 Quest 2 대비 40%이상 얇은 광학 스택을 제작했습니다. 고급 VR LCD 디스플레이 기술로 37% 많은 인치당 픽셀이 구현됩니다. 1.3배 더 큰 색 영역이 보다 생생한 색감으로 더욱 화려한 VR 경험을 선사합니다.
고성능 하드웨어
고급 VR/MR 센서 10개, 입체 사운드, 256GB 스토리지, 12GB RAM, 50% 향상된 성능을 제공하는 Snapdragon XR2+ 프로세서 등 강력한 하드웨어가 탑재되어 있습니다.
이전 버전과의 호환성
계속해서 Meta Quest 2 앱 카탈로그에 액세스하여 좋아하는 게임, 엔터테인먼트 앱 등을 모두 즐길 수 있으니 안심하세요.
손쉬운 멀티태스킹
크기를 조정할 수 있는 여러 화면을 열거나 새로운 아이디어를 개선하거나 피드를 스트리밍하거나 친구들과 메시지를 주고받을 수 있습니다. 이 새로운 능력 덕분에 그 어느 때보다 더 쉽게 멀티태스킹을 할 수 있죠.
충전 도크 제공
고속 전원 어댑터가 포함된 컴패니언 충전 도크를 사용하면 헤드셋과 컨트롤러를 충전된 상태로 유지해 번뜩이는 아이디어가 떠오를 때 바로 아이디어를 실현해 볼 수 있습니다.
유연한 몰입감 수준
55~75mm의 IPD 범위와 지속적인 IPD 조정이 또렷한 시각적 선명도를 선사하고 눈의 피로를 줄여줍니다. 주변부가 완전히 탁 트인 시야부터 부분적으로 가려진 시야(포함됨) 또는 완전한 몰입감을 선사하는 시야(액세서리)까지 VR 몰입감을 자신에게 맞는 방식으로 다양하게 조정할 수 있습니다.
오큘러스 DK2 부터 관심을 가지고 구매하고 사용해본 사람으로서 이게 2,000,000 만원의 가치가 있을까 좀 의문이 들긴하는데 주변 사람들에게 물어보니 잠시 보류라고 한다.
그만큼 가격대가 높다는 얘기인데 아직 써보기전이라 어떤 기술들이 접목이 되어있는지 궁금하긴 하다. 예전환율로 (1130원 정도?) 계산하면 1,695,000원 정도인데 지금 사기에는 너무 아깝다. 그리고 SKT에서 또 정발하게 되면 AS 문제도 있기 때문에 난 지금 안사면 죽을것 같애!!! 라는 사람 빼곤 오큘러스퀘스트2 홀딩하고 있지 않을까나..
가장 개선되었으면 하는 부분은
무게 밸런스 배터리 시간 화소 시야각 고글 흘러내림 내부 압력 자동 배출 렌즈 자동 거리조절
