Skip to content

Commit 1f2151c

Browse files
Zeta611Zeta611
committed
✨ Sidebar with background, tips, colophon, and more!
1 parent 920b441 commit 1f2151c

16 files changed

Lines changed: 1436 additions & 38 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
- [x] 폰트 변경
66
- [ ] 용어 분류 필터를 고려한 단어 수 / 서버 렌더링
77
- [x] 댓글 고치기 및 지우기
8-
- [ ] 취지 / 제작기
8+
- [x] 취지 / 제작기
99
- [ ] 관리자 모드
1010
- [ ] 프로필
1111
- [x] 링크 공유

‎app/background/page.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import Link from "next/link";
2+
import { Separator } from "@/components/ui/separator";
3+
import YouTube from "@/components/icons/YouTube";
4+
5+
export const metadata = {
6+
title: "배경 | 쉬운 전문용어",
7+
description: "쉬운 전문용어 프로젝트의 배경, 원칙, 쓰임에 대해 소개합니다.",
8+
};
9+
10+
export default function BackgroundPage() {
11+
return (
12+
<div className="mx-auto flex w-full max-w-3xl flex-col gap-6">
13+
<header className="flex flex-col gap-1">
14+
<h1 className="text-3xl font-bold">쉬운 전문용어</h1>
15+
</header>
16+
<div className="text-right text-sm">
17+
<Link
18+
href="https://kwangkeunyi.snu.ac.kr"
19+
target="_blank"
20+
rel="noopener noreferrer"
21+
className="hover:text-foreground underline underline-offset-4"
22+
>
23+
한국정보과학회 쉬운전문용어 제정위원회
24+
<br />
25+
서울대학교 컴퓨터공학부 이광근
26+
</Link>
27+
</div>
28+
29+
<Separator />
30+
31+
<div className="pt-2">
32+
<p className="text-lg font-extrabold">
33+
억지 순우리말? <span className="text-red-600">No.</span> 소리뿐인
34+
한문투?
35+
<span className="text-red-600"> No. </span>쉬운말?
36+
<span className="text-blue-600"> Yes! </span>
37+
<Link
38+
href="https://youtu.be/fRLPpOL5b_4"
39+
target="_blank"
40+
rel="noopener noreferrer"
41+
className="hover:text-foreground underline underline-offset-4"
42+
>
43+
<YouTube className="mb-1 ml-1 inline-block size-5.5 text-red-600" />
44+
</Link>
45+
</p>
46+
</div>
47+
48+
<Separator />
49+
50+
<section className="flex flex-col gap-3">
51+
<h2 className="text-2xl font-semibold">배경</h2>
52+
<p className="text-foreground leading-7">
53+
전문지식이 전문 학자들에만 머문다면 그 분야는 그렇게 쇠퇴할 수 있다.
54+
저변이 좁아지고 깊은 공부를 달성하는 인구는 그만큼 쪼그라들 수 있다.
55+
</p>
56+
<p className="text-foreground leading-7">
57+
전문지식이 보다 많은 사람들에게 널리 퍼진다면, 그래서 더 발전할 힘이
58+
많이 모이는 활기찬 선순환이 만들어진다면. 그러면 그 분야를 밀어올리는
59+
힘은 나날이 커질 수 있다. 더 많은 사람들이 더 나은 성과를 위한
60+
문제제기와 답안제안에 참여할 수 있고, 전문가의 성과는 더 널리 이해되고
61+
더 점검받을 수 있게된다.
62+
</p>
63+
<p className="text-foreground leading-7">
64+
그러므로 쉬운 전문용어가 어떨까. 전문개념의 핵심을 쉽게 전달해주는
65+
전문용어. 학술은 학술의 언어를—우리로서는 소리로만 읽을 원어나
66+
한문을—사용해야만 정확하고 정밀하고 경제적일까? 아무리 정교한
67+
전문지식이라도 쉬운 일상어로 짧고 정밀하게 전달될 수 있다. 시에서
68+
평범한 언어로 밀도 있게 전달되는 정밀한 느낌을 겪으며 짐작되는 바이다.
69+
</p>
70+
<p className="text-foreground leading-7">
71+
쉬운 전문용어가 활발히 만들어지고 테스트되는 생태계. 이것이 울타리없는
72+
세계경쟁에서 우리를 깊고 높게 키워줄 비옥한 토양이다. 시끌벅적
73+
쉬운말로 하는 학술의 재미는 말할것도 없다.
74+
</p>
75+
</section>
76+
77+
<section className="flex flex-col gap-3">
78+
<h2 className="text-2xl font-semibold">원칙</h2>
79+
<p className="text-foreground leading-7">
80+
쉬운 전문용어를 만들때 원칙은 다음과 같다.
81+
<ul className="list-disc pl-6 leading-7">
82+
<li>
83+
<strong>정확히 이해하기</strong>: 전문용어의 의미를 정확히
84+
이해하도록 한다. 이해못했다면 쉬운말을 찾을 수 없다.
85+
</li>
86+
<li>
87+
<strong>쉬운말을 찾기</strong>: 그 의미가 정확히 전달되는 쉬운말을
88+
찾는다.
89+
</li>
90+
<li>
91+
<strong>어깨힘 빼기</strong>: 이때, 어깨에 힘을 뺀다. 지레
92+
겁먹게하는 용어(불필요한 한문투)를 피하고, 가능하면 쉬운말을
93+
찾는다.
94+
</li>
95+
<li>
96+
<strong>하나만 필요는 없다</strong>: 전문용어 하나에 쉬운 한글용어
97+
하나가 일대일 대응일 필요가 없이, 상황에 따라서 다양하게 풀어쓸 수
98+
있다. 중요한 것은 의미의 명확한 전개.
99+
</li>
100+
<li>
101+
<strong>때로는 소리나는 대로</strong>: 도저히 쉬운말을 찾을 수
102+
없을 땐, 소리나는대로 쓴다.
103+
</li>
104+
<li>
105+
<strong>때로는 만들기</strong>: 쉬운 느낌을 가진 새 말을 만들 수도
106+
있다. 우리가 모국어의 심연을 공유하므로 가능하다.
107+
</li>
108+
<li>
109+
<strong>괄호안에 항상-I</strong>: 원문 전문용어는 괄호안에 항상
110+
따라붙인다.
111+
</li>
112+
<li>
113+
<strong>깨어있기</strong>: 기존의 관성에 눈멀지 않는다. 이미
114+
널리퍼진 용어지만 쉽지않다면, 보다 쉬운 전문용어를 찾고 실험한다.
115+
</li>
116+
<li>
117+
<strong>괄호안에 항상-II</strong>: 이때, 기존용어는 원문
118+
전문용어와 함께 괄호안에 따라붙인다.
119+
</li>
120+
<li>
121+
<strong>순우리말 No, 쉬운말 Yes</strong>: 쉬운말은 순수 우리말을
122+
뜻하지 않는다. 외래어라도 널리 쉽게 받아들여진다면 사용한다.
123+
</li>
124+
</ul>
125+
</p>
126+
</section>
127+
128+
<section className="flex flex-col gap-3">
129+
<h2 className="text-2xl font-semibold">쓰임</h2>
130+
<p className="text-foreground leading-7">
131+
K-언어권에서 말하고 글 쓸 때 사용한다.
132+
<ul className="list-disc pl-6 leading-7">
133+
<li>
134+
설명/강의/저술/번역/블로그/SNS 등에서 한국어로 말하고 글 쓸 때
135+
사용한다.
136+
</li>
137+
<li>
138+
쉽게쉽게 도란도란, 통쾌하게 시끌벅적, 차근차근 왁자글, 신나게
139+
재미있게.
140+
</li>
141+
</ul>
142+
</p>
143+
</section>
144+
</div>
145+
);
146+
}

‎app/colophon/page.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import Link from "next/link";
2+
import { Separator } from "@/components/ui/separator";
3+
import GitHub from "@/components/icons/GitHub";
4+
5+
export const metadata = {
6+
title: "제작기 | 쉬운 전문용어",
7+
description: "쉬운 전문용어 사이트 제작 배경과 기술 선택에 대해 소개합니다.",
8+
};
9+
10+
export default function ColophonPage() {
11+
return (
12+
<div className="mx-auto flex w-full max-w-3xl flex-col gap-6">
13+
<header className="flex flex-col gap-1">
14+
<h1 className="text-3xl font-bold">제작기</h1>
15+
</header>
16+
17+
<div className="text-right text-sm">
18+
<Link
19+
href="https://ropas.snu.ac.kr/~jhlee"
20+
target="_blank"
21+
rel="noopener noreferrer"
22+
className="hover:text-foreground underline underline-offset-4"
23+
>
24+
서울대학교 프로그래밍 연구실 이재호
25+
</Link>
26+
</div>
27+
28+
<Separator />
29+
30+
<section className="flex flex-col gap-3">
31+
<h2 className="text-2xl font-semibold">더 빨라진 쉬운 전문용어</h2>
32+
<p className="text-foreground leading-7">
33+
새로운 쉬운 전문용어는 사용자에게 보다 쾌적하고 빠른 경험을 제공하는데
34+
초점을 두고 개발하였다. 이를 위해, 경계없는 프로그래밍(tierless
35+
programming, multi-tier programming)을 통해 앞단(frontend)과
36+
뒷단(backend)의 코드를 함께 작성할 수 있는 Next.js를 써서 밑바닥부터
37+
다시 개발하였다.
38+
</p>
39+
<p className="text-foreground leading-7">
40+
Next.js는 리액트 컴포넌트를 서버쪽에서 그릴 수 있다 (server-side
41+
rendering, SSR). SSR을 통해 사용자는 이미 그려진 웹사이트를 받아오기
42+
때문에, 브라우저에 도달해 비로소 화면을 그리기 시작하는 것(client-side
43+
rendering, CSR)보다 더 빠른 경험을 누릴 수 있다.
44+
</p>
45+
<p className="text-foreground leading-7">
46+
또한 TanStack Query를 사용해, 이미 불러온 데이터는{" "}
47+
<Link
48+
href="/jargon/cache"
49+
target="_blank"
50+
className="underline underline-offset-4"
51+
>
52+
주머니(cache)
53+
</Link>
54+
에 넣어두는 방식으로 더 빠른 경험을 제공할 수 있게 되었다.
55+
</p>
56+
<p className="text-foreground leading-7">
57+
리액트 훅의 작동 의미구조를 명확히 정리하면서 얻은 연구경험, 그리고
58+
기존 사이트를 만들어본 개발경험 덕에 새로운 버전을 더 수월하게 만들 수
59+
있었다.
60+
</p>
61+
</section>
62+
63+
<section className="flex flex-col gap-3">
64+
<h2 className="text-2xl font-semibold">더 알아보기</h2>
65+
<p className="text-foreground leading-7">
66+
쉬운 전문용어의 소스코드는{" "}
67+
<Link
68+
href="https://github.com/Zeta611/easyword"
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
className="underline underline-offset-4"
72+
>
73+
<GitHub className="inline-block size-4" /> Zeta611/easyword
74+
</Link>
75+
에서 살펴볼 수 있다. 사이트 자체에 대한 질문이나 건의사항이 있다면
76+
깃허브의{" "}
77+
<Link
78+
href="https://github.com/Zeta611/easyword/issues"
79+
target="_blank"
80+
rel="noopener noreferrer"
81+
className="underline underline-offset-4"
82+
>
83+
이슈
84+
</Link>{" "}
85+
기능을 활용하면 된다.
86+
</p>
87+
</section>
88+
89+
<Separator />
90+
<section className="flex flex-col gap-3">
91+
<h2 className="text-2xl font-semibold">
92+
초기 버전: 기초가 튼튼한 언어로 작성하기
93+
</h2>
94+
<p className="text-foreground leading-7">
95+
본 사이트의 앞단(frontend)은 ReScript로 작성되었다. ReScript는 강력한
96+
정적 타입 시스템이 장착된 OCaml에서 파생된 함수형 프로그래밍 언어로,
97+
웹 프로그래밍의 표준이 된 JavaScript로 번역된다. 이러한 특징을 가진
98+
ReScript는 탄탄한 프로그래밍 언어의 기반과 풍부한 JavaScript 생태계의
99+
이점을 동시에 누린다. 안전하면서도 편리한 언어의 힘을 맛 본 사람으로서
100+
ReScript는 매력적인 언어일 수밖에 없다.
101+
</p>
102+
<p className="text-foreground leading-7">
103+
TypeScript와 Flow처럼 기존의 JavaScript 위에 정적 타입 시스템을 얹는
104+
방법도 있지만, 이런 방식은 분명 언어를 고안할 때부터 정적 타입
105+
시스템을 염두한 것에 비하면 불완전하다. ReScript는 JSX, 비동기 처리와
106+
같은 JavaScript 세상과의 연결도 편리하게 제공하면서, OCaml의 계보를
107+
이어받아 가변 변수, 예외, 모듈 시스템과 같은 기능과 더불어 (원한다면)
108+
GADT, 확장 가능한 갈래 타입(extensible variant) 등의 기능도 제공한다.
109+
</p>
110+
<p className="text-foreground leading-7">
111+
함수형 사고방식을 지향하는 ReScript의 장점은 React의 함수 컴포넌트를
112+
사용할 때 빛을 발휘한다. 특히 임의로 중첩되는 나무 구조식 댓글을 만들
113+
때 체감할 수 있었는데, 서로 맞물려 돌아가는 컴포넌트로 댓글 구조를
114+
만들었을 때의 전율은 아직도 생생하다.
115+
</p>
116+
</section>
117+
</div>
118+
);
119+
}

‎app/layout.tsx‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import type { Metadata } from "next";
22
import { Source_Code_Pro, IBM_Plex_Sans_KR } from "next/font/google";
33
import Image from "next/image";
4+
import { cookies } from "next/headers";
45
import { SpeedInsights } from "@vercel/speed-insights/next";
56
import { Analytics } from "@vercel/analytics/next";
67
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
78
import NavBar from "@/components/navigation/NavBar";
9+
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
10+
import { SideBar } from "@/components/navigation/SideBar";
811
import { SearchDialogProvider } from "@/components/dialogs/SearchDialogProvider";
912
import QueryProvider from "@/app/_providers/QueryProvider";
1013
import { LoginDialogProvider } from "@/components/auth/LoginDialogProvider";
@@ -26,46 +29,55 @@ export const metadata: Metadata = {
2629
description: "컴퓨터 분야 쉬운 전문용어 번역 플랫폼",
2730
};
2831

29-
export default function RootLayout({
32+
export default async function RootLayout({
3033
children,
3134
}: Readonly<{
3235
children: React.ReactNode;
3336
}>) {
37+
const cookieStore = await cookies();
38+
const defaultOpen = cookieStore.get("sidebar_state")?.value === "true";
39+
3440
return (
3541
<html lang="ko">
3642
<body
3743
className={`${ibmPlexSansKR.className} ${sourceCodePro.variable} !bg-background font-sans antialiased`}
3844
>
3945
<QueryProvider>
40-
<SearchDialogProvider>
41-
<LoginDialogProvider>
42-
<div className="flex min-h-screen w-full flex-col px-4 sm:px-6 lg:px-8">
43-
<NavBar />
44-
<main className="flex-1">{children}</main>
45-
<footer className="mt-4 flex h-12 items-center justify-center gap-1">
46-
<a
47-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
48-
href="https://kiise.or.kr"
49-
target="_blank"
50-
rel="noopener noreferrer"
51-
>
52-
<Image
53-
aria-hidden
54-
className="w-11 sm:w-auto"
55-
src="/kiise.png"
56-
alt="KIISE logo"
57-
width={122}
58-
height={25}
59-
/>
60-
<p className="text-muted-foreground line-clamp-1 text-[10px] sm:text-sm">
61-
한국정보과학회 쉬운전문용어 제정위원회 지원을 받았습니다
62-
</p>
63-
</a>
64-
</footer>
65-
</div>
66-
</LoginDialogProvider>
67-
</SearchDialogProvider>
68-
<ReactQueryDevtools initialIsOpen={false} />
46+
<SidebarProvider defaultOpen={defaultOpen}>
47+
<SideBar />
48+
<SearchDialogProvider>
49+
<LoginDialogProvider>
50+
<SidebarInset>
51+
<div className="flex min-h-svh w-full flex-col px-4 sm:px-6 lg:px-8">
52+
<NavBar />
53+
<main className="flex-1">{children}</main>
54+
<footer className="mt-4 flex h-12 items-center justify-center gap-1">
55+
<a
56+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
57+
href="https://kiise.or.kr"
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
>
61+
<Image
62+
aria-hidden
63+
className="w-11 sm:w-auto"
64+
src="/kiise.png"
65+
alt="KIISE logo"
66+
width={122}
67+
height={25}
68+
/>
69+
<p className="text-muted-foreground line-clamp-1 text-[10px] sm:text-sm">
70+
한국정보과학회 쉬운전문용어 제정위원회 지원을
71+
받았습니다
72+
</p>
73+
</a>
74+
</footer>
75+
</div>
76+
</SidebarInset>
77+
</LoginDialogProvider>
78+
</SearchDialogProvider>
79+
<ReactQueryDevtools initialIsOpen={false} />
80+
</SidebarProvider>
6981
</QueryProvider>
7082
<SpeedInsights />
7183
<Analytics />

0 commit comments

Comments
 (0)