포럼

포럼형 게시판을 찾았고 Discourse, Flarum, NodeBB 중에서

Discourse는 기능이 많지만 무거워 보였고 Flarum은 한글 검색이 문제였습니다.
NodeBB는 https://github.com/NavyStack/nodebb-plugin-dbsearch-korean 플러그인이 보여서 NodeBB로 결정했는데 한국어 검색은 다른 방법으로 해결했습니다

기본 설치

https://docs.nodebb.org/installing/os/
위의 링크 설명을 따라 설치하면 되고 리눅스를 사용할 수 있는 사람이라면 어렵지 않습니다
그리고 nodebb는 웹소켓을 사용합니다. 끌 수도 있지만 웹소켓을 쓰지 않으면 좀 느려지는 것 같습니다

검색 플러그인

기본으로 제공되는 검색 플러그인은 nodebb-plugin-dbsearch 인데 한글 검색이 불완전 합니다. 그래서, nodebb-plugin-dbsearch-korean 플러그인을 누군가가 만들었던 거겠죠

이 플러그인을 홈 서버에서 테스트 할 때는 잘 되었지만 VPS에 올렸을 때는 (이유는 모르겠지만) 동작이 잘 되지 않았습니다. 코드를 뜯어서 수정하는 방법도 있겠지만 시간이 걸려서 외부 검색 엔진을 사용한 플러그인을 찾았고 Meilisearch가 CJK(중국어,일본어,한국어) 검색이 잘 된다는 글을 보게 되었습니다

nodebb-plugin-meilisearch 플러그인을 설치하셨고 한글이 잘 검색되는 것을 확인했습니다. (Flarum도 meilisearch 플러그인이 있네요)

meilisearch 엔진은 docker 로 간단하게 설치할 수 있고 여기를 클릭해서 보면 됩니다.
설치할 때 마스터 키 설정과 데이터 수집 옵션에 주의하면 될 것 같습니다

Docker로 실행할 때
-e MEILI_NO_ANALYTICS=true -e MEILI_MASTER_KEY='MASTER_KEY' 옵션으로 데이터 수집을 끄고 마스터 키를 설정할 수 있습니다

그 외

Chat 기능은 꺼두었고, 2FA 플러그인을 추가로 설치했습니다

TTF 폰트 로딩 및 다루기

두 개의 데모가 있습니다. https://www.alongthecloud.com/ 에 있는데요

하나는 opentype.js 와 SVG를 사용하는 데모이고 또 하나는 Three.js에 포함되어 있는 TTFLoader를 사용하여 폰트를 그리고 평면 그림자를 드리우는 데모입니다

평면 그림자는 여기 ShadowMesh 예제 에서 사용된 그림자 기법입니다. 비용이 싸지만 평면에만 그림자를 드리울 수 있고 효과를 주기 어렵죠

두 개의 데모는 TTF 를 직접 로딩 하며 해당 부분만 설명하겠습니다

Opentype.js font + SVG 데모

컴포넌트에서

import opentype from 'opentype.js'; ... const [svgPath, setSvgPath] = useState(('')); const path = font.getPath(text, 0, fontSize, fontSize); const svgPath = path.toPathData(); setSvgPath(svgPath);

이렇게 로딩하며 렌더링 부분은

<g> <path d={svgPath} stroke={stroke} fill={fill} /> </g>

이렇게 되어 있습니다
여기에 svg의 style을 사용하여 여러 효과를 주면 되겠죠

R3F 3D Font 와 Plane Shadow 데모 import { TTFLoader } from 'three/examples/jsm/loaders/TTFLoader'; ... const loadFont = async (fontUrl) => { console.log('Try Load Font'); try { const loader = new TTFLoader(); loader.load(fontUrl, function (json) { const font = new Font(json); // 몇몇 한글 폰트에서 공백이 ?로 표시되는 것을 방지 if (!font.data.glyphs[' ']) { font.data.glyphs[' '] = font.data.glyphs['\0']; } setUserFont(font); }) } catch (error) { console.error('Font loading error :', error); } };

중간에 폰트 글리프 ' '를 바꿔주는 곳이 있는데 주석 단 것 처럼 몇몇 한글 폰트의 경우 저렇게 해 주지 않으면 공백이 ?로 표시되는 경우가 있습니다

위 코드로 로드된 font 개체는

const shapes = font.generateShapes(text, fontSize); const geometry = new THREE.ShapeGeometry(shapes, 20);

이렇게 Geometry로 바뀌어서 3D공간에서 사용되게 됩니다

이곳은 제가 만든 코드에 대한 피드백을 주고 받고 그리고 웹그래픽스 또는 여러가지 개발 관련 주제들에 대해 이야기를 나눌 목적으로 만들었습니다

하나 하나 채워보려고 합니다