Exhibition & Workshop Archive Website

산수화의 갤러리 밪에서 진행한 전시와 워크샵을 아카이브하는 웹사이트다. 각 콘텐츠를 모두 균일하게 보여주기 위해, 뚜렷한 사진이 없거나 포스터를 제작하지 못한 전시 및 워크샵의 섬네일을 구성하는 작업을 했다.

This website is an archive of exhibitions and workshops held at Gallery BAAT. To ensure a consistent presentation of content, I started by creating thumbnails (images used as posters) for exhibitions and workshops that lacked have clear photographs or were unable to produce posters.

planning 100Design 100Web Publishing 100

Figma, HTML/CSS, Javascript

Website ^{(Desktop/Mobile)}

https://archive.sansuhwa.com

Micro Website for Anniversary Exhibition

공익법단체 두루의 10주년 전시에서 관객 참여형으로 제작한 웹페이지다. 〈지도 표시하기〉는 서울시의 주요 구에서 휠체어 접근성에 대한 정보를 관객이 직접 O, X로 나누어 표시하도록 했고, 〈타자 게임하기〉는 전시의 주요 이야깃거리를 직접 타이핑하며, 해당 주제에 맞는 정보는 엽서(영수증)와 같이 기념으로 가져갈 수 있도록 했다.

This webpage has been developed as a tool to encourage audience participation at the 10th anniversary exhibition of the Association for Public Interest Law 〈duroo〉. Entitled 〈Pin the map〉, this initiative invited visitors to highlight areas of Seoul with poor wheelchair accessibility. 〈Play the typing game〉 invited visitors to contribute to the main narrative of the exhibition by typing in the information that best fit the theme, which could then be taken home as a souvenir, such as a postcard (receipt).

Design 20Web Publishing 100

HTML/CSS, Javascript, Jquery

Website ^{(Desktop/Mobile)}

지도 표시하기 타자 게임하기

Pin the map Play the typing game

B2C App Service, B2B/B2C Promotion Website

성형 및 뷰티 B2B‧B2C 서비스의 MVP/런칭을 위한 디자인을 했다. 기존에 제작된 디자인 컴포넌트 규칙을 따르되 관리가 용이하도록 정돈되지 않은 UX 논리를 정리하고 다양한 컴포넌트를 구조화하기 위해 노력했다.

My role involved the design and management of a B2B and B2C service for plastic surgery and beauty information. This included the attraction of hospitals to use the service and its promotion to customers. I followed the established design component rules, but tried to clean up the disorganised UX logic and structure the various components for ease of management.

Managing Graphic Assets 50Design 70Web Publishing 30

Figma, Adobe XD, Zeplin, Framer, HTML/CSS, Javascript

App ^(Mobile/Pad) Website ^{(Desktop/Mobile)}

Natoo Prototype - Google Drive Promotion Website Assets - Figma Side Project Assets - Figma

Accommodation Service Webpage

전주 콩나물주택의 룸서비스 프로토타입 웹페이지로, 숙소에서 사용자가 QR코드로 웹페이지에 접속해 상품을 담고 주문할 수 있도록 설계했다.

This is the prototype webpage for the room service menu at Kongnamul-Jutaek in Jeonju, South Korea. Hotel guests can access the webpage using a QR code, view the products and place their order in the lobby on the first floor.

Design 30Web Publishing 100

HTML/CSS, Javascript, Google Sheet

Website ^{(Desktop/Mobile)}

Archive Link

Portfolio Website

잡지, 음반, 브랜드 아이덴티티, 포스터, 음반, 책자 등 다양한 매체를 다루는 디자인 회사의 웹 포트폴리오 웹사이트로, 기존 웹사이트에 있던 키워드(SEO)를 바탕으로 메인 페이지를 구성했다. 디자인 및 프론트엔드 구성과 퍼블리싱 작업을 하고, 백엔드 개발자와 협업했다.

I created a web portfolio for a design company that works with a variety of mediums, including magazines, records, brand identities, posters, records and booklets. I organised the main page based on the meta keywords(SEO) from the existing website. I worked on the design, front-end configuration and publishing, and collaborated with the back-end developer.

Planning 100Design 80Web Publishing 50

Figma, HTML/CSS, Next js, Jquery

Website ^{(Desktop/Mobile)}

https://everylittlething.co.kr Part of the assets(Figma)

Portfolio Website

사진 스튜디오의 포트폴리오 웹사이트로, 화려한 그래픽보다는 사진 작업이 잘 보이도록 하기 위해 정보의 간결한 정리와 부드러운 움직임을 중요시하며 웹사이트를 제작했다.

As a portfolio website for a photography studio, I built the website with an emphasis on concise organisation of information and smooth movement to showcase the photography work rather than flashy graphics.

Planning 50Design 100Web Publishing 100

Webflow, HTML/CSS, Javascript

Website ^{(Desktop/Mobile)}

https://studiorelease.kr

Portfolio Website

베리띵즈는 도시와 자연 속의 편안함을 공간, 브랜딩, 그래픽 디자인으로 표현하는 디자인 스튜디오다. 각 프로젝트의 주 색상을 이용해 페이지를 구성하고, 디자인의 유연성이 떨어지는 웹 빌더를 사용하는 대신 직접 구축을 진행했다.

Verythings is a design studio that expresses the comfort of the city and nature through space, branding and graphic design. I composed the pages using the identity colours of each project, and built them myself by writing the HTML instead of using a website builder, which has less design flexibility.

Planning 50Design 50Web Publishing 100

Indesign, HTML/CSS, Javascript, Jquery

Website ^{(Desktop/Mobile)}

https://verythings.org

Accommodation Interactive Webpage

스테이 패스포트 익스프레스의 1층 로비에 위치한 티켓을 받아갈 수 있게 만든 웹페이지다.

A website created for users to collect their tickets from the ground floor lobby of the Stay Passport Express.

Design 30Web Publishing 100

HTML/CSS, Javascript

Website ^{(Desktop/Mobile),} For Chromium browser

Archive Link

Teen centre proposal website

움직이는청소년센터 EXIT의 프로젝트 TEAM2200 기획서를 다양한 사람들이 쉽게 볼 수 있도록 종이 문서가 아닌 웹페이지로 제안하고, 글 중심의 정보들을 웹 상에서 효과적으로 보여주기 위해 노력했다.

I suggested the project TEAM2200 proposal of 〈Moving Teen Centre EXIT〉 as a webpage instead of a paper document so that a wide range of people could easily view it, and I attempted to present the text-oriented information as effectively as possible on the web.

Planning 50Design 70Web Publishing 100

HTML/CSS, Javascript

Website ^{(Desktop/Mobile)}

Archive Link

Online-Exhibits Website

파주타이포그라피배곳 대학원 과정의 졸업 작업과 함께 온라인 졸업 전시 웹사이트를 기획하고 제작했다. 더배곳 6명의 졸업 작품이 일러스트‧사운드‧영상‧글꼴‧공간‧웹이라는 모두 다른 디자인 매체로 만들어져, 누구 하나 튀지 않고 조화로운 웹사이트를 만들기 위해 이미지의 사용을 최소화하고 웹에서 보여주기 유용한 임의 배열을 활용하여 제작했다.

I was responsible for curating and creating an online graduation exhibition website to accompany the graduation work of the Paju Typography Institute's postgraduate course. The six graduating students' work was created in different design mediums, including illustration, sound, video, font, space and web, to create a harmonious website. The website was designed to minimise the use of images and utilise random arrangements, which are useful on the web.

Planning 70Design 70Web Publishing 100

HTML/CSS, Javascript

Website ^{(Desktop/Mobile)}

Archive Link

E-Commerce Website

패션 브랜드 카달로그의 이커머스 쇼핑몰 웹사이트로, 디자인을 할 때 강한 그래픽과 색상 요소를 사용하기 보다는, 브랜드의 무드와 제품에 어울리는 차분한 톤을 구현하기 위해 노력했다.

I was commissioned to design a website for the fashion brand CADALOGUE. Rather than using strong graphic and colour elements in the design, I strived to achieve a subdued tone to match the brand's mood and products.

Planning 50Design 100Web Publishing 50

Imweb, CSS, Javascript, Jquery

Website ^{(Desktop/Mobile)}

https://cadalogue.kr

Promotion Website

일본과 아프리카 등지에서 활동하는 인티머시 코디네이터의 한국 활동을 위해 기존에 제작된 해외 웹사이트*의 컨텐츠를 그대로 담으며, 한국에서 보기에 친숙한 디자인을 구성하기 위해 노력했다.

For the Korean activities of the Intimacy Coordinators, who are active in Japan, Africa, and elsewhere, I created a design that would be familiar to the Korean audience, while retaining the content from the existing overseas websites*.

Planning 80Design 100Web Publishing 100

Squarespace, Javascript

Website ^{(Desktop/Mobile)}

https://intimacycoordinatorkorea.com

[*] 인티머시 코디네이터 제팬:intimacy coordinator Japan: https://intimacy-co.jp

Portfolio Website

부동산 매물을 찾는 다양한 브랜드의 고객에게 부동산 서비스를 효과적으로 홍보하기 위한 웹사이트다.

The website has been designed to promote real estate services to customers of different brands looking for property for sale.

Planning 50Design 100Web Publishing 50

Squarespace, HTML/CSS, Javascript

Website ^{(Desktop/Mobile)}

https://www.ohoi.xyz Under Construction Page

Promotion Website

한옥 스테이 서유숙의 공간과 주변 풍경을 닮은 옅은 아이보리 계열의 색감을 사용하고, 공간의 분위기에 맞게 넉넉한 여백의 디자인을 하기 위해 노력했다.

The design incorporates a pale ivory colour scheme intended to reflect the space and surrounding landscape of Stay Seoyoosuk. The creation of a design with generous white space was undertaken to match the ambience of the space.

Planning 30Design 30Web Publishing 100

HTML/CSS, Javascript

Website ^{(Desktop/Mobile)}

https://seoyoosuk.com

Condensed Hangul Font

“주변에서 흔하게 볼 수 있는 꽃이 피기 위해서는 뿌리와 줄기가 제 역할을 해야 합니다. 달콤한 기대는 그 결과만을 따르게 합니다. 그보다는 꽃이 피기까지의 과정을 중요하게 여깁니다.”

완성형 한글 2350자 중 1000자의 글자 조합을 만들고, 그 과정을 담은 결과물로 글꼴보기집을 만들었다.

“The roots and stem must fulfil their function if the flowers we see around us are to bloom. While it is important to have clear expectations, it is the process that leads up to the result that is truly valuable.”

I created font combinations for 1000 of the 2350 complete Korean characters and created a font book to document the process.

Glyphs, Indesign

Work ^{(Graphic/Volumes)}

Historical anniversaries calendar

Selected Anniversary
*4월 4일 종이 안 쓰는 날
*4월 16일 세월호 참사
*4월 20일 장애인차별철폐의 날
*4월 22일 지구의 날

디자인 스튜디오 일상의 실천과 함께 2021년 달력의 4월 메인 이미지를 만들었다. ‘부서진, 긁힌 자국, 녹슨 것’ 등의 키워드를 바탕으로 픽셀 아트와 같은 그래픽을 표현하고, 바다의 기름 유출 사고를 표현하기 위해 실제 폐기름을 촬영하여 그래픽 작업을 했다.

I worked with the design studio 〈everyday-practice〉 to create the main image for the April 2021 calendar. This was developed using keywords such as 'broken, scratched, rusty' to produce a pixel art-style graphic, and photographs of actual waste oil were used to symbolise an oil spill in the ocean.

Illustrator, Photoshop

print ^{(Graphic/Volumes)}

https://everyday-practice.com/a-history-of-practice/

Editorial, Experience Design

단순히 서식 종이 한 장을 예쁘게 디자인 하는 것이 아니라 사용자의 작성과 제출, 관리자의 접수와 처리 업무에 대한 입장을 고민하며 작업했다.

In designing this form, I considered not only the user experience of filling it out and submitting it, but also that of the administrator receiving and processing it.

planning 50Design 50

Hangul Word Processor, Indesign

print ^{(Graphic/Volumes)}

View PDF