아까 CSS 수정하라고 했는데 바빠서 너무 대충 설명한 것 같아서 조금 더 자세히 적어봄.

일단 인터넷 브라우저로 FVTT 들어가서 개발자 모드를 열면 됨. 크롬은 단축키 F12고 파폭은 Ctrl + Shift + K 인가 그럴 거임.

익스플로러 같은 걸 쓰진 않으리라고 믿음.



그럼 위 이미지처럼 개발자 콘솔 열리는데 먼저 위에 있는 Elements 탭에서 1번으로 표시한 sidebar 항목 클릭.

그러면 아래 Styles 탭에 저런 게 나올 텐데 2번으로 표시된 width를 원하는 값으로 변경해줌.



300px로 돼 있던 거 500px로 바꾸면 이렇게 넓어짐. 개발자 콘솔은 닫아도 됨.

근데 이 경우는 해당 페이지에서만 임시로 바꾸는 거기 때문에 새로고침하거나 다음에 다시 켜면 다시 설정해줘야 하긴 함.

어려운 건 아니지만 귀찮을 수 있고 나 말고 다른 플레이어들도 넓게 쓰게 하고 싶은데 이거 설명해주기 번거로울 수 있음.

그 경우엔 모듈을 만들어보자.


먼저 FVTT 데이터 폴더 들어가서 그 아래 modules 폴더 안에 새 모듈 폴더를 하나 만듦.

나는 widechat이라는 이름으로 만들었음.


해당 폴더에 메모장 같은 걸로 module.json 이라는 파일 만들어서 이렇게 입력하고 저장.

나머지는 맘대로 지정해도 되는데 ["style.css"] 는 바꾸면 안 되고 맨 위에 있는 name 항목은 폴더 이름이랑 같아야 할 거임.

밑에 ve1rsion이라고 된 거는 디씨 금칙어 때문이니까 1 지워 주고.

{
  "name": "widechat",
  "title": "Wide Chat",
  "description": "채팅창 넓게.",
  "ve1rsion": "0.0.0",
  "styles": ["style.css"]
}



그리고 또 메모장 같은 걸로 style.css 라는 파일 만들어서 이렇게 입력하고 저장.

500px이라고 적힌 부분을 원하는 숫자만큼 늘리면 됨.

#sidebar {
  width: 500px;
}


전체 폴더 구조는 아래 이미지 같은 형태일 거임.



이제 FVTT 껐다가 다시 켜주면 됨.



그럼 모듈 설정 창 가보면 방금 만든 모듈이 뜰 텐데 체크박스 체크해주고 변경사항 적용하면 넓어짐.

다른 플레이어들도 마찬가지로 적용됨.


수정 과정에서 module.json 파일 변경할 경우엔 FVTT 껐다가 다시 켜야 적용되는데

나머지 파일은 FVTT 켜놓은 상태에서도 변경하고 새로고침하면 적용되니까 껐다가 켤 필요 없고 값 바꾸고 새로고침 해 가면서 적당한 값 찾으면 됨.



이렇게 쉬운데 왜 모듈로 만들어서 배포 안 하냐고 물어볼 수 있는데 이유는 크게 두 가지임.

일단 내가 지금 관리중인 번역 및 기능 추가 모듈이 많아서 유지보수가 좀 버겨움.


그리고 예시로 만든 건 그냥 자기가 대충 width값 수정해서 쓰면 그만인데

여러 사람을 대상으로 배포하는 경우엔 파일 직접 안 고치고 게임 안에서 수정할 수 있게 하는 게 이상적임.

해당 인터페이스 어떻게 해야 편할지 고민해야 하니까 일이 많아짐.


뭐 종합하면 너무 귀찮다는 이유가 큼.

관심 있는 사람 있으면 모듈 만들어서 직접 관리해도 좋을 듯.