Portfolio Main View
Hi ther
I'mdesigner
&web developer
focused onUX
+design systems
About Me
Empathize with Users
์ฌ์ฉ์์ ์๊ตฌ์ฌํญ, ๋๊ธฐ, ๊ทธ๋ฆฌ๊ณ ๋ฌธ์ ์ ์ ๊น์ด ์ดํดํ๊ธฐ ์ํด ํ๋ฅด์๋์ ์ฌ์ ์ง๋๋ฅผ ํ์ฉํฉ๋๋ค. ์ด๋ฌํ UX ๋ฆฌ์์น ๊ณผ์ ์ ํตํด ์ป์ ์ธ์ฌ์ดํธ๋ฅผ ๋ฐํ์ผ๋ก, ์ฌ์ฉ์ ์ค์ฌ์ ์ค๊ณ์ ์ต์ ํ๋ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํ ๋ฐฉํฅ์ ์ค์ ํ๊ณ ์์ต๋๋ค.
I utilize personas and journey maps to gain a deep understanding of usersโ needs, motivations, and pain points. The insights gained from this UX research process guide me in setting the direction for user-centered design and delivering optimized experiences.
Crafting Intuitive and Functional User Experiences
๋ฆฌ์์น ๋จ๊ณ์์ ์ป์ ์ธ์ฌ์ดํธ๋ฅผ ๋ฐํ์ผ๋ก, ์ฌ์ฉ์์๊ฒ ์ง๊ด์ ์ด๊ณ ํธ์ํ ๊ฒฝํ์ ์ ๊ณตํ๋ UI๋ฅผ ์ค๊ณํฉ๋๋ค. ์ธํฐํ์ด์ค์ ์๊ฐ์ ์์๋ฟ๋ง ์๋๋ผ, ๊ธฐ๋ฅ์ ์ผ๋ก๋ ์ํํ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ์ค์ ์ ๋๊ณ ์์ ํฉ๋๋ค. ๋จ์ํ ๋ฌธ์ ์ ๋ํ ์ ๋ต์ ์ฃผ๋ ๋๊ตฌ๋ฅผ ๋์์ธํ๋ ๊ฒ์ด ์๋, ์ฌ์ฉ์์ ์ํตํ๋ฉฐ ํจ๊ป ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ ์๋ฃจ์ ์ ์ ์ํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๊ณ ์์ต๋๋ค.
Based on insights gained during the research phase, I design intuitive and user-friendly UIs. I focus not only on the visual elements of the interface but also on providing a seamless functional experience. My goal is to create solutions that foster communication and collaboration with users, rather than simply offering tools that provide predefined answers.
From Design to Reliable Code
๋์์ธ์ ๋์ด, ๊ธฐ๋ฅ์ ์ด๊ณ ์ ๋ขฐ์ฑ ์๋ ์ฝ๋๋ฅผ ํตํด ์ง์ ๊ตฌํํฉ๋๋ค. ์ด๋ฅผ ํตํด ํ์ ์ ๋์์ธ๊ณผ ๊ฐ๋ฐ ๊ฐ์ ์ํํ ์ปค๋ฎค๋์ผ์ด์ ์ ์ด๋์ด๋ ๋๋ค. ํจ์ํ ์ปดํฌ๋ํธ์ ๋ํ ์ดํด๋ฅผ ๋ฐํ์ผ๋ก, ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ ์ค๊ณ๋ฅผ ๊ณ ๋ คํ์ฌ ๊ตฌํํฉ๋๋ค. ๊ฐ๋ฐ ๊ณผ์ ์์์ ๋ฌธ์ ํด๊ฒฐ ๊ฒฝํ์ ๋ธ๋ก๊ทธ์ ๊ณต์ ํ๋ฉฐ ์ง์์ ์ผ๋ก ์๊ธฐ๊ณ๋ฐ์ ํ์ฐ๊ณ ์์ต๋๋ค.
Beyond design, I also implement functional and reliable code. This helps facilitate smooth communication between design and development during collaboration. With a strong understanding of functional components, I focus on building reusable components. I also continuously improve myself by sharing problem-solving experiences from the development process on my blog.
Building Consistent and Scalable Design Systems
์์คํ ์ ์ผ๊ด์ฑ์ ์ค์ํ๊ฒ ์๊ฐํ๋ฉฐ, ํ์ฅ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๊ณ ๋ คํด ๋ชจ๋ ๊ตฌ์ฑ ์์๊ฐ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ ํ์์ ๋ฐ๋ผ ์ ์ฐํ๊ฒ ๋์ํ ์ ์๋๋ก ์์คํ ์ ๊ตฌ์ถํฉ๋๋ค. ์๋ฃจ์ ์ ๋์์ธ ์์คํ ์ ๊ธฐ๋ฐ์ผ๋ก ์์ ๋๋ฉฐ ์ด๋ฅผ ํตํด ๋ชจ๋ ๊ตฌ์ฑ ์์๊ฐ ํต์ผ๋ ๊ท์น ํ์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌ๋ฉ๋๋ค.
I prioritize consistency within the system and build it with scalability and maintainability in mind, ensuring that all components are reusable and adaptable when needed. The solution is developed based on a design system, allowing all components to be efficiently managed under unified guidelines.
Enhancing User Experience with Interaction and Motion
์ฌ์ฉ์์ ์ ํ ๊ฐ์ ์ํํ ์ํต์ ์ํด ์ธํฐ๋์ ๊ณผ ๋ชจ์ ๋์์ธ์ ํ์ฉํ์ฌ ์ง๊ด์ ์ด๊ณ ๋ชฐ์ ๊ฐ ์๋ ๊ฒฝํ์ ๋ง๋๋ ๊ฒ์ ์ค์ํ๊ฒ ์๊ฐํฉ๋๋ค. Keyframe๊ณผ transition์ ์ฌ์ฉํด ์ธํฐ๋์ ์ ๊ตฌํํ์ฌ ๋ชจ์ ๋์์ธ์ ๋ํ ์ ์ฒด์ ์ธ ๋ฐฉํฅ์ ๊ณต์ ํ๊ณ ๊ฐ๋จํ ์คํฌ๋กค ํธ๋ฆฌ๊ฑฐ ์ด๋ฒคํธ๋ GSAP์ ํ์ฉํ์ฌ ๊ตฌํํฉ๋๋ค.
I prioritize creating intuitive and immersive experiences by using interaction and motion design to facilitate smooth communication between users and the product. I implement interactions using keyframes and transitions to share the overall direction of the motion design, and I use GSAP to implement simple scroll-triggered events.
My Works
WORKS
Network monitoring dashboard UI that visualizes real-time outage and facility status data, allowing users to quickly identify and resolve issues.


Integrated Network Management System
Creating customizable widgets that provide users with the information they need, while establishing visual hierarchy and depth between components through Glassmorphism.
Integrated Network Management System
Wallboard-style monitoring dashboard that detects real-time issues, providing instant visibility into system performance and potential disruptions.
InfoMap 2.0
Info Map is a real-time monitoring dashboard that detects issues and ensures smooth operations by helping quickly identify and resolve problems through a map displaying the regional distribution of incidents.
My Projects
MY
PROJECTS
- HTML
- SCSS
- JavaScript
Ticky Tocky
A web-based service designed to facilitate the management and sharing of team project schedules
2024- HTML
- SCSS
- JavaScript
ohouse
This is a clone coding project of Ohouse, designed to gain experience in implementing website features and UI.
2024- Next
- TypeScript
- SCSS
- Storybook
GGF/Good Game Friends
GGF is a community website for gamers who love games, where gamers can communicate and play games together
2024- React
- TypeScript
- SCSS
- Storybook
GGF Design System
GGF UI is an open-source React component library. It is designed for easy accessibility, allowing anyone to use its components effortlessly
2024- React
- TypeScript
- Tailwind
Mingle
Take control with our user-friendly dashboard, allowing you to organize and personalize your rolling papers, ensuring each message stands out
2024- React
- TypeScript
- Tailwind
- Storybook
Mingle Design System
Mingle-UI is a comprehensive design system built with Tailwind CSS and Storybook, consistently used across the Mingle service
2024
README.md
Hi, I'm Heesoo ๐
About Me
- ๐ฉโ๐ป ์ค๋๋ ฅ ์๊ณ ๊ตฌํ ๊ฐ๋ฅํ UI ์ค๊ณ๋ฅผ ๋ชฉํ๋ก HTML, CSS, jQuery๋ฅผ ๋ ํํ์ฌ ๊ตฌํ์ ๊ธฐ๋ฐ์ ๋ค์ก์ต๋๋ค.
- ๐ฌ ์ฌ๋ฏธ์๊ณ ์๋ก์ด ๊ฒฝํ์ ํ ์ ์๋๋ก, ๋ค์ํ ๊ด์ ์์ ์ฌ๊ณ ํ๋ฉฐ ์ฐฝ์์ ์ธ ์๋ฃจ์ ์ ์ ์ํ๋ ๊ฒ์ ์ข์ํฉ๋๋ค.
- โจ ๋ฌธ์ ํด๊ฒฐ ๊ณผ์ ์์ ์ฌ์ฉ์์ ์๋ฃจ์ ๊ฐ์ ์ํํ ์ํต์ ๋๊ธฐ ์ํด, ๋ค์ํ ์ธํฐ๋์ ์ ๊ตฌํํ๊ณ ์ง์์ ์ผ๋ก ๊ฐ์ ํด ๋๊ฐ๋๋ค.
- ๐ค ๋์์ธ๊ณผ ๊ฐ๋ฐ ๊ฐ์ ์ํํ ํ์ ์ ์ํด ์๊ธฐ ๊ฐ๋ฐ์ ํ์ฐ๋ฉฐ, ๋ณํํ๋ ๊ธฐ์ ํ๊ฒฝ์ ๋ฅ๋์ ์ผ๋ก ๋์ํฉ๋๋ค.
2,505 contributions in the last year
- Sep
- Oct
- Dec
- Jan
- Fab
- Mar
- Apr
- May
- Jun
- Jul
- Aug
- Sep
HTML
์๋งจํฑ ํ๊ทธ์ ๋ฉํ ํ๊ทธ๋ฅผ ํ์ฉํด ๊ตฌ์กฐ์ ์ด๋ฉฐ ์ ๊ทผ์ฑ์ด ๋์ ์น ํ์ด์ง๋ฅผ ์์ฑํฉ๋๋ค.
CSS
Flexbox์ Grid๋ก ๋ฐ์ํ ๋์์ธ์ ๊ตฌํํ๋ฉฐ, keyframes๋ก ๋์ ์ธ ์ ๋๋ฉ์ด์ ์ ์ ์ํฉ๋๋ค.
SCSS
mixin, placeholder, nesting์ ํ์ฉํ์ฌ ๋ชจ๋ํ๋ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์คํ์ผ์ ์์ฑํฉ๋๋ค.
Tailwind
์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฌ์ฉํด ๋น ๋ฅด๊ณ ์ผ๊ด์ฑ ์๋ ์คํ์ผ๋ง๊ณผ ์ปค์คํฐ๋ง์ด์ง์ ๊ตฌํํฉ๋๋ค.
Javascript
DOM ์กฐ์, ์ด๋ฒคํธ ์ฒ๋ฆฌ, ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ์ ํ์ฉํด ๋์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํฉ๋๋ค.
Typescript
ํ์ ๊ณผ ์ธํฐํ์ด์ค๋ฅผ ์ ์ํ์ฌ ์ฝ๋์ ์์ ์ฑ์ ๋์ด๋ฉฐ, ์ง์์ ์ผ๋ก ํ์ต ์ค์ ๋๋ค.
React
ํจ์ํ ์ปดํฌ๋ํธ์ ์ํ ๊ด๋ฆฌ๋ฅผ ์ดํดํ๊ณ , ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ์ค๊ณ ๋ฐ ๊ตฌํํฉ๋๋ค.
Blog
๊ฐ๋ฐ ํ์ต ๊ณผ์ ๊ณผ ์ธ์ฌ์ดํธ๋ฅผ ๋ธ๋ก๊ทธ์ ๊พธ์คํ ๊ธฐ๋กํ๊ณ ๊ณต์ ํฉ๋๋ค.