PJW48

이야기 굵은체 복각

박주완 — Mon, 03 Jan 2022 08:58:07 +0900

DOS시절 PC통신 프로그램 ‘이야기 5,3’에 쓰인 ‘굵은체’를 웹폰트로 복각하였습니다.

도트 폰트를 복각한 것으로, 레트로 분위기를 내기에 적합합니다.
추억의 PC통신 화면을 재현하거나, 고전게임 풍의 게임을 만들 때 사용하시면 좋습니다.

11,172자의 한글 완성자와 로마자(영문자), KS X 1001 특수문자 등이 복각되어 있습니다.
특수문자는 패치를 통해 추가되거나 변경될 수 있습니다.

폰트는 MIT 라이선스를 기반으로 배포됩니다.
영리/비영리 불문하고 사용 가능합니다.
(단, 폰트 파일만 유료 판매는 불가)

CSS 오방낭 레이아웃

박주완 — Fri, 24 Mar 2017 16:40:14 +0900

CSS로 오방낭 레이아웃을 구현한 예시입니다.

온 우주의 기운이 도와준다 하여 화제가 된 그 오방낭의 모양입니다.
노랑을 중심으로 나머지 4개의 색이 배열된 그 형태를 재현하였습니다.

※주: 최순실 게이트가 터졌을 때 박근혜 전 대통령의 취임식에 거대한 오방낭이 사용된 것으로 알려져 있습니다.
그 오방낭의 색 배치는 잘못된 것으로, 왼쪽 위부터 시계방향으로 하양-검정-파랑-빨강 순서가 옳은 색 배치입니다.

URL: https://pjw48.net/portfolio/obangnang/

HTML5 활용 LED 전광판 위젯

박주완 — Thu, 09 Mar 2017 23:33:32 +0900

실험적으로 만들어 본 한글 LED 전광판 위젯입니다.

예전에 LED 전광판 효과를 내는 자바 애플릿이 있었지만 오늘날 자바 애플릿의 쇠퇴 추세에 따라 이를 대체할 수 있는 HTML5 기반 전광판 위젯을 시험삼아 만들어 보았습니다.

현재 한글과 몇몇 특수문자 지원합니다.

활용 예: https://pjw48.net/webapp/hanled/redcrew/

HTML < ... > 변환기

박주완 — Sat, 25 Feb 2017 23:34:52 +0900

HTML 태그의 < ... > 문자를 자동으로 < ... >로 변환하는 웹앱입니다.

블로그 등에 코드를 삽입할 때 < ... > 문자를 HTML 태그로 잘못 인식하여 의도치 않은 결과가 발생하는 것을 방지하기 위하여 < ... >로 변환하는 과정이 필요한데 이 변환을 자동으로 하는 웹앱입니다.

링크: https://pjw48.net/webapp/ltgt_conv/

위젯 강제 개행기

박주완 — Sun, 12 Feb 2017 14:41:44 +0900

위젯 페이지에 넣어 위젯을 강제로 개행시키는 위젯입니다.

이 위젯의 용도는 위젯 페이지에 위젯의 폭을 좁게 해서 바둑판식으로 나눠 쓸 때 레이아웃 보호용입니다.

바둑판식 콘텐츠 위젯을 쓸 때 위젯의 높이가 불균일할 경우 의도치 않게 레이아웃이 깨져버리는 경우가 있을 수 있기에,

중간에 이 위젯을 넣으면 위쪽 위젯의 높이가 불균일하더라도 그 아래쪽이 가지런하게 정렬됩니다.

다운로드: force_wlb.zip

설치 방법: xe의 widgets 디렉터리 밑에 force_wlb 폴더를 만들어서 업로드합니다.

※ 이 위젯의 소스코드는 GPL v2로 배포합니다.

라듐시계 (HTML5와 SVG)

박주완 — Fri, 10 Feb 2017 00:02:21 +0900

플래시 없이 HTML5와 SVG, CSS와 자바스크립트를 이용하여 구현해 본 라듐시계입니다.

라듐 특유의 푸른 야광빛을 구현하였습니다.

기본: https://pjw48.net/webapp/radiumclock/

무지개: https://pjw48.net/webapp/radiumclock/rainbow.html

바이너리: https://pjw48.net/webapp/radiumclock/binary.html

제작자 워드프레스 블로그 (직접 디자인)

박주완 — Wed, 08 Feb 2017 23:37:57 +0900

제가 직접 디자인한 워드프레스 블로그 템플릿입니다.

저의 개발 자료 등을 저장하기 위하여 이 홈페이지 계정에 별도로 설치한 블로그입니다.

URL: https://pjw48.net/wordpress/

highlight.js 구문강조 애드온

박주완 — Wed, 25 Jan 2017 21:40:38 +0900

highlight.js 구문강조를 xe에서 사용하기 위한 애드온입니다.

이 애드온을 사용하면 프로그래밍 코드 등의 구문을 색깔로 강조하는 효과를 자동으로 부여할 수 있습니다.

프로그래밍 관련 사이트 등에 사용하면 유용한 애드온입니다.

사용법

이 애드온을 설치 후 다음과 같이 사용할 수 있습니다.

x = 1
if x == 1:
    # indented four spaces
    print("x is 1.")

x = 1
if x == 1:
    # indented four spaces
    print("x is 1.")

다운로드: highlightsjs.zip

설치 방법: xe의 addons 디렉터리 밑에 highlightsjs 폴더를 만들어서 업로드합니다.

※ 이 애드온의 소스코드는 GPL v2로 배포합니다.

※ 단, 줄 번호 플러그인은 https://github.com/wcoder/highlightjs-line-numbers.js에서 가져왔으며 MIT 라이선스로 배포됩니다.

GravaGen - 그라바타 생성기 위젯

박주완 — Mon, 23 Jan 2017 16:10:56 +0900

그라바타(Gravatar)를 xe에서 사용하기 위한 위젯입니다.

이 위젯을 사용하면 그 변수로 입력한 메일 주소에 맞는 그라바타가 생성됩니다.

그라바타를 사용하고자 할 때 레이아웃 스킨 등의 코드에 이 위젯 코드를 사용하면 안성맞춤입니다.

예:

email_address}" image_size="40" default_image="retro" />

이 위젯을 설치 후 레이아웃 html 파일의 적당한 부분에 위 코드를 삽입하면 로그인시 retro 스타일의 40픽셀 그라바타가 표시됩니다.

다운로드: gravagen.zip

설치 방법: xe의 widgets 디렉터리 밑에 gravagen 폴더를 만들어서 업로드합니다.

※ 이 위젯의 소스코드는 GPL v2로 배포합니다.

위젯 스타일 Sininen

박주완 — Sat, 21 Jan 2017 23:35:10 +0900

xe용 위젯스타일 Sininen입니다.

심플하면서도 모던한 느낌이 깔끔한 맛을 주는 것이 특징으로, 사이트 레이아웃 Sininen과 잘 어우러집니다. 물론 다른 사이트 레이아웃과도 함께 사용할 수 있습니다.

또한, 13가지의 색을 지원합니다.

(파랑, 제비꽃, 보라, 진분홍, 빨강, 황갈색, 노랑, 노랑연두, 초록, 에메랄드, 청록, 밝은파랑, 회색)

다운로드: ws_sininen.zip

설치 방법: xe의 widgetstyles 디렉터리 밑에 ws_sininen 폴더를 만들어서 업로드합니다.

※ 이 스타일의 디자인은 Creative Commons 3.0 BY 라이선스로, 소스코드는 GPL v2로 배포합니다.

사이트 레이아웃 Sininen

박주완 — Sat, 21 Jan 2017 23:04:54 +0900

xe용 사이트 레이아웃 Sininen입니다.

심플하면서도 모던한 느낌이 깔끔한 맛을 주는 것이 특징으로, PC와 모바일 화면에서 볼 수 있는 반응형 레이아웃입니다.

이 레이아웃은 3단 메뉴까지 지원합니다. (하위 메뉴가 있는 2단 메뉴 항목으로 들어가면 3단 메뉴 표시줄이 추가로 생깁니다.)

또한, 기본 위젯과 관련된 CSS를 내장하고 있으며 13가지의 색을 지원합니다.

(파랑, 제비꽃, 보라, 진분홍, 빨강, 황갈색, 노랑, 노랑연두, 초록, 에메랄드, 청록, 밝은파랑, 검정)

※ Content 위젯 삽입시 위젯스킨은 기본(default), 컬러셋은 레이아웃에 맞춤, HTML 출력 방식은 UL(list)을 선택하시기 바랍니다.

업데이트 내역

1.01: 일부 브라우저에서 강제 스크롤 버튼 작동 안 되는 버그 수정, 기타 미세 조정.

다운로드: sininen_1_01.zip

설치 방법: xe의 layouts 디렉터리 밑에 sininen 폴더를 만들어서 업로드합니다.

※ sininen은 핀란드어로 '파랑'(blue)을 뜻합니다. 필자가 좋아하는 색이고, 파란색으로 시작해서 13개의 색으로 확장하였기 때문입니다.

※ 이 레이아웃은 여러 브라우저와의 호환성을 고려하여 제작되었으며, 구글 크롬에서 가장 잘 보입니다.

※ 이 레이아웃의 디자인은 Creative Commons 3.0 BY 라이선스로, 소스코드는 GPL v2로 배포합니다.

구 버전

1.00: sininen.zip

달력 디자인 예시

박주완 — Fri, 02 Dec 2016 22:28:51 +0900

달력 디자인 예시입니다.

접이식 광고지 디자인 예시, 오락실

박주완 — Wed, 23 Nov 2016 23:01:19 +0900

접이식 광고지 디자인 예시입니다.

이 디자인의 테마는 오락실입니다.

포스터 디자인 예시, 음악회

박주완 — Wed, 23 Nov 2016 22:54:11 +0900

포스터 디자인 예시입니다.

이 디자인의 테마는 음악회입니다.

드림위버 반응형, 통닭

박주완 — Fri, 18 Nov 2016 11:48:35 +0900

드림위버를 이용하여 제작한 반응형 페이지의 예시입니다.

이 디자인의 테마는 통닭 상점입니다.

URL: https://pjw48.net/portfolio/d2/

파랑, 빨강, 초록 격자무늬

박주완 — Wed, 16 Nov 2016 19:46:17 +0900

포토샵을 이용하여 파랑, 빨강, 초록의 격자무늬를 구현한 예시입니다.

랜덤 무지개 격자무늬

박주완 — Wed, 16 Nov 2016 19:38:30 +0900

포토샵을 이용하여 랜덤 패턴의 무지개 격자무늬를 구현한 예시입니다.

스크래치 아트 예시

박주완 — Mon, 17 Oct 2016 15:21:40 +0900

포토샵을 이용하여 무지개 스크래치 아트를 구현한 예시입니다.

제이쿼리 활용 무지개색 링크 예제

박주완 — Sun, 16 Oct 2016 11:02:11 +0900

제이쿼리를 이용하여 링크와 스크롤 선 색이 무지개색으로 바뀌는 페이지를 만든 예시입니다.

URL: https://pjw48.net/portfolio/rbc/

웹진 디자인 예시, 컴퓨터 상점

박주완 — Sun, 16 Oct 2016 10:50:06 +0900

컴퓨터 상점을 테마로 한 웹진의 예시입니다.

https://drive.google.com/file/d/0B5ckZaORmnmGVkJrS2NWREd0R0U/view?usp=sharing

트래픽 문제로 부득이하게 구글 드라이브로 다운로드 링크를 걸었습니다.

어도비 플래시를 사용하므로 모바일 등 플래시를 볼 수 없는 환경에서는 제대로 동작하지 않습니다.

펜툴 활용 로고그리기 예시

박주완 — Sun, 16 Oct 2016 10:29:34 +0900

일러스트레이터를 이용한 펜툴로 로고 그리기 예시입니다.

제이쿼리 웹앱, 여자친구

박주완 — Sat, 15 Oct 2016 23:14:02 +0900

제이쿼리 웹앱 디자인 예시입니다.

이 디자인의 테마는 걸그룹 여자친구입니다.

URL: https://pjw48.net/portfolio/jwa2/

DPS 앱북 디자인 예시

박주완 — Sat, 15 Oct 2016 23:10:51 +0900

인디자인을 이용한 DPS 앱북 디자인 예시입니다.

드림위버 반응형 예시

박주완 — Sat, 15 Oct 2016 22:54:03 +0900

드림위버를 이용하여 제작한 반응형 페이지의 예시입니다.

URL: https://pjw48.net/portfolio/fg1/

드림위버 반응형, 컴퓨터 상점

박주완 — Sat, 15 Oct 2016 22:52:30 +0900

드림위버를 이용하여 제작한 반응형 페이지의 예시입니다.

이 디자인의 테마는 컴퓨터 상점입니다.

URL: https://pjw48.net/portfolio/d/

드림위버 홈 페이지 일반

박주완 — Sat, 15 Oct 2016 22:49:45 +0900

드림위버를 이용하여 제작한 홈 페이지의 예시입니다.

이 디자인의 테마는 한국 슈퍼모델 팬 페이지입니다.

URL: https://pjw48.net/portfolio/c/

아이패드 UI 디자인 예시, 커피전문점

박주완 — Sat, 15 Oct 2016 22:46:19 +0900

포토샵을 이용한 아이패드 UI 디자인 예시입니다.

이 디자인의 테마는 커피 전문점입니다.

아이패드 UI 디자인 예시, 애견애묘샵

박주완 — Sat, 15 Oct 2016 22:45:25 +0900

포토샵을 이용한 아이패드 UI 디자인 예시입니다.

이 디자인의 테마는 애견애묘샵입니다.

갤럭시탭 디자인 예시, 뮤직플레이어

박주완 — Sat, 15 Oct 2016 22:39:22 +0900

포토샵을 이용한 갤럭시탭의 뮤직플레이어 UI 디자인 예시입니다.

아이패드 UI 디자인 예시

박주완 — Sat, 15 Oct 2016 22:37:24 +0900

포토샵을 이용한 아이패드 UI 디자인 예시입니다.

레이아웃 디자인 예시

박주완 — Sat, 15 Oct 2016 22:33:45 +0900

포토샵을 이용한 레이아웃 디자인 예시입니다.

3D 그래픽 디자인 예시

박주완 — Sat, 15 Oct 2016 22:28:04 +0900

일러스트레이터를 이용한 3D 그래픽 디자인 예시입니다.

빙글빙글 로딩중 효과

박주완 — Sat, 15 Oct 2016 22:25:56 +0900

로딩중일 때 나오는 회전하는 바퀴를 구현한 예시입니다.

URL: https://pjw48.net/portfolio/lw/

이미지 합성/리터칭 예시

박주완 — Sat, 15 Oct 2016 22:23:00 +0900

포토샵을 이용한 이미지 합성 및 리터칭 예시입니다.

제작자 티스토리 블로그 (직접 디자인)

박주완 — Sat, 15 Oct 2016 20:36:34 +0900

제가 직접 디자인한 티스토리 블로그 템플릿입니다.

URL: http://parkjuwan.tistory.com/

CMS 템플릿 디자인 예제

박주완 — Mon, 10 Oct 2016 20:31:50 +0900

XE나 워드프레스 등에 사용되는 CMS 템플릿을 디자인한 예시입니다.

URL: https://pjw48.net/portfolio/old2/

HTML 일반, 컴퓨터 상점

박주완 — Mon, 10 Oct 2016 17:20:50 +0900

컴퓨터 상점을 테마로 한 홈 페이지의 예시입니다.

URL: https://pjw48.net/portfolio/old/