Portfolio Main View

Hi therpacman icon

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.

work spin imagearrow up image
  • 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.

    work dashboard image
  • Integrated Network Management System

    Wallboard-style monitoring dashboard that detects real-time issues, providing instant visibility into system performance and potential disruptions.

    work dashboard image
  • 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.

    work dashboard image

My Projects

MY

PROJECTS

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

    ๊ฐœ๋ฐœ ํ•™์Šต ๊ณผ์ •๊ณผ ์ธ์‚ฌ์ดํŠธ๋ฅผ ๋ธ”๋กœ๊ทธ์— ๊พธ์ค€ํžˆ ๊ธฐ๋กํ•˜๊ณ  ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค.