:형태를 만들다
:소개
KIM DONG HWI
1997 11 14
그린컴퓨터아카데미 성남 UI/UX반응형웹 디자인&퍼블리셔 정규과정 수료 (2025.09)
쇼핑몰 Gemora 상세페이지 제작 (2025.08)
하이미디어아카데미 성남 포토샵+일러스트(GTQ + GTQi) 그래픽디자인 과정 수료 (2025.04)
에잇세컨즈 FA 근무(2023.10 ~ 2025.01)
수원 계명 고등학교 졸업(2016.03)
웹 디자인 개발 기능사 (2025.09)
GTQ1급 (2025.05)
GTQi1급 (2025.05)
:기술
감각적인 보정과 합성에 자신 있습니다.
로고·아이콘·브랜딩 자산을 정밀한 벡터로 구축합니다
컴포넌트·오토레이아웃·프로토타입으로 빠르게 검증합니다
시맨틱 마크업과 표준을 기반으로 구조를 탄탄히 합니다
변수·믹스인으로 일관된 반응형 디자인을 설계합니다
깔끔한 인터랙션과 상태 제어로 사용자 흐름을 만듭니다
과하지 않은 스크롤 모션으로 콘텐츠 집중도를 높입니다
테마 커스터마이즈와 상세페이지를 브랜드 톤에 맞춥니다
타임라인 기반 모션으로 브랜드의 리듬을 설계합니다
:리그 오브 레전드 디자인
타겟층:남성 , 10-30대
표현방법:사진 , 영상 , 컨텐츠
디자인컨셉:깔끔한 , 역동적인 , 흥미로운
반응형 웹 디자인
메인+서브+로그인
게임의 첫 이미지를 시각적으로 강조하기 위해
큰 타이포그래피와 유튜브 애니메이션 링크를 활용하였습니다.
배경에 어두운 모달을 사용해 시각적 집중을 높였습니다
챔피언 선택 영역은 직관적으로 역할군 아이콘과
캐릭터 아트를 함께 배치하여 사용자가 원하는 스타일을
쉽게 탐색할 수 있도록 설계했습니다. 슬라이더를 통해
양한 캐릭터를 확인할 수 있게 인터랙션을 추가했습니다.
e스포츠 및 게임 업데이트 소식을 카드형 UI로 구성하여
정보 접근성을 높였습니다.
호버 효과와 대비되는 색감으로
시선이 자연스럽게 흘러가도록 디자인했습니다.
게임의 핵심 모드들을 원형 비디오와 텍스트 블록으로 구성하여 직관적인
이해를 돕고, 시각적 포인트를 주었습니다.
호버 효과를 통한 사용자의 행동을 유도했습니다.
굿즈 스토어 섹션은 상품 사진과 가격 정보를 간결하게 배치하여
쇼핑몰 UI와 동일한 경험을 제공했습니다.
게임 외적인 브랜드 경험을 확장할 수 있도록 디자인했습니다.
로그인 팝업은 모달 창으로 구현하여 집중도를 높였으며,
직관적인 입력 폼과 최소한의 버튼만 배치해
사용자 편의성을 우선시했습니다.
:누네 안과 병원 디자인
타겟층 :남성 , 여성 20-50대
표현방법:사진 , 영상 , 컨텐츠
디자인컨셉:깔끔한 , 부드러운 , 편안함
반응형 웹 디자인
메인+서브
밝은 아이보리 계열의 배경과 대형 비주얼을 사용해
의료 서비스의 ‘안정감’을 우선했습니다. GSAP ScrollTrigger로 8% 수준의 미세 패럴랙스를 적용해
상하 스크롤 시 시선 흐름이 자연스럽게 이어지도록 설계했습니다.
QUALITY & TRUST’ 메시지를 두 단계 타이포(영문 슬로건 → 한글 해석)로 계층화했습니다.
키 컬러(#575043)를 선형 요소(언더라인·디바이더)에 반복 사용해
문장 가독성과 브랜드 일관성을 확보했습니다.
IntersectionObserver로 뷰포트 진입 시
1회만 리빌되어 과도한 애니메이션을 피했습니다.
각 지점은 ‘텍스트 요약 → 가로 폭이 큰
이미지 슬라이드’ 순으로 구성했습니다
사진을 크게 보여 신뢰 이미지를 강화하고,
좌우 배치 변주로 스크롤 피로도를 줄였습니다.
브랜드 어원과 의미를 세로 타이포그래피로 풀어
사용자가 ‘읽는 경험’을 하도록 디자인했습니다.
span 단위에 인덱스 기반 딜레이를 적용해
리듬감 있게 나타납니다.
원형 프레임·부드러운 그림자·중간 톤 텍스트로
신뢰 이미지를 강화했습니다.
카드와 설명 텍스트를 페어로 배치하여 시선 이동이 짧고,
‘VIEW MORE’ 버튼을 통해 상세로 이어지는 행동 경로를 명확히 했습니다.
썸네일·제목·기간을 한 카드에 통합해 정보 파편화를 방지했습니다.
hover 시 살짝 상승/그림자 효과로 클릭 가치를 직관적으로 전달합니다.
페이지 하단 숫자 네비로 상태를 안내합니다.
임베드 영역을 독립된 래퍼로 감싸 반응형 비율과 라운딩을 유지했습니다.
영상은 mute/loop 옵션으로 자연스럽게 재생되며,
헤드라인 대비를 크게 주어 구역 인지가 즉각적입니다.
:소방청 디자인
타겟층 :남성 , 여성 20-50대
표현방법:사진 , 로고 , 컨텐츠
디자인컨셉:인상적인 , 부드러운 , 컬러포인트
반응형 웹 디자인
메인+서브
히어로 위에 소형 정보 배지를 겹쳐 ‘실시간 공공 서비스’의 인상을 강화했습니다. 투명한 배경
과 작게 정돈된 타이포로 정보성을 높이되 시야 방해는 최소화했습니다.
현장감 있는 풀스크린 히어로
상단 히어로에 실제 출동 장면을 배치해
첫 3초 안에 ‘누구를 위한 사이트’인지
직관적으로 전달했습니다. 강한 콘트라스트와
좌측 정렬 헤드라인으로 시선을 고정시키고, 공감-몰입을 유도했습니다.
자주 찾는 기능을 카드형 썸네일로 묶어 2클릭 이내에
도달하도록 설계했습니다. 이미지 중심 카드와 짧은 캡션으로 스캔 속도를 높였고,
다양한 현장 이미지를 통해 서비스 범위를 시각적으로 설명합니다.
브랜드 톤의 버건디 배경과 따뜻한 카피로 ‘보호·연대’의 가치를 서사화했습니다.
단체 사진 3연 배열은 ‘함께 지킨다’는 메시지를
반복적으로 각인시키는 역할을 합니다.
공지 영역은 표 구조로 정리해 가독성을 확보했습니다.
제목–일자–작성자 정렬을 맞춰 신뢰도를 높였고,
사용자가 최신 이슈를 빠르게 스캔할 수 있습니다.
:카페 디자인
타겟층 :남성 , 여성 20-50대
표현방법:사진 , 택스트 , 컬러
디자인컨셉:깔끔한 , 부드러운 , 편안함
반응형 웹 디자인
메인+서브
브랜드/가맹/메뉴/스토어/뉴스로 1차 분류를 단순화해
사용자가 목적 경로를 즉시 예측하도록 설계했습니다.
로그인·회원가입·장바구니를 우측에 고정해 커머스 접근성을 높였습니다.
풀스크린 히어로 + 카피
따뜻한 카페 인테리어를 풀스크린으로 사용하고
첫 3초 안에 ‘누구를 위한 사이트’인지
직관적으로 전달했습니다. 강한 콘트라스트와
좌측 정렬 헤드라인으로 시선을 고정시키고, 공감-몰입을 유도했습니다.
고흥 유자 이야기’처럼 지역·시즌 스토리를 아치형 카드로 전개해
브랜드 서사를 강화했습니다. 동일한 카드 패턴과
짧은 캡션으로 스캔 속도를 높였습니다.
브라운·오렌지 포인트와 절제된 세리프 헤드라인을 사용해
따뜻함과 프리미엄 이미지를 동시 전달했습니다.
넉넉한 여백으로 편안한 리듬을 만들었습니다.
‘Our Blends’는 대표 메뉴 1개를 크게 노출하고, 우측에 리스트형 카드로 확장해
‘몰입형 소개→빠른 비교’의 흐름을 만들었습니다.
커피빈 패턴과 라운드 코너로 브랜드 친밀감을 유지했습니다.
파스텔 톤의 제품 사진을 그리드로 배치해
굿즈 구매 전환을 유도했습니다
본품-굿즈 동선이 자연스럽게 이어지도록 하단에 배치했습니다.
파스텔 톤의 제품 사진을 그리드로 배치해
굿즈 구매 전환을 유도했습니다
본품-굿즈 동선이 자연스럽게 이어지도록 하단에 배치했습니다.
:TeamProject
타겟층: 남성 , 여성 10~30대
표현방법:사진 , 영상 , 컨텐츠
디자인 컨셉:모던함, 세련된, sns
모바일 디자인
메인+서브
팀 프로젝트로 진행한 패션/커머스 앱 UI/UX 기획안입니다.
저는 메인 화면 및 카테고리·마이페이지 디자인을 담당했습니다.
사용자 흐름이 직관적으로 이어지도록 와이어플로우를 설계했습니다.
단순 피드 구조를 넘어서, 브랜드 쇼핑 플랫폼에 맞는 다채로운 콘텐츠를 배치.
상단에 카테고리 탭(쇼핑, 날씨, 컬러, 숏폼, 이벤트)을 추가하여 탐색성을 강화.
실시간 인기 상품, 카테고리 아이콘, 셀럽 소개, 매거진&가이드,
Most View This Week 등 다양한 콘텐츠 블록을 구성하였습니다
SNS 피드와 커머스 기능을 융합하여, “보는 재미 + 쇼핑 경험”을 동시에 제공.
톤앤매너는 모던하면서도 패션 트렌드에 어울리는 세련된 스타일로 구현.
초기 기획안은 기능과 구조를 간략히 제시한 목업 형태로,
시각적 완성도나 사용자 경험 측면에서는 한계가 있었습니다.
저는 이를 토대로 브랜드 톤과 트렌드를 반영하여
실제 서비스에 가까운 디자인으로 발전시켰습니다.
:TeamProject
타겟층: 학생 , 강사 , 전연령
표현방법:입체감 , 버튼
디자인 컨셉:깔끔한, 사용성, 전문적인
앱 디자인
앱 화면
클래스케어 앱 UI/UX 디자인
본 프로젝트는 팀 단위로 진행된 학사 관리 어플리케이션 클래스케어 제작 과정입니다
저는 디자인 파트를 맡아 메인 화면, 로그인 및 빠른 실행, 반선택·반추가 기능 등
주요 화면의 UI 시각화와 사용자 흐름 설계에 집중했습니다.
사용자 입장에서 필요한 기능을 분석하고, 와이어플로우를 통해 화면 간 이동과
인터랙션을 직관적으로 이어지도록 구현했습니다.
또한 프로그램 실행, 반추가 설정 등 세부 기능들이 명확히 드러나도록
시각적 우선순위를 배치하여 편리성과 가독성을 동시에 확보했습니다.
최종 디자인에서는 아이콘과 레이아웃을 정돈하여 사용자가 한눈에 흐름을 이해할 수 있는
직관적 사용성을 확보했습니다. 또한 프로그램 실행, 반선택·반추가 등
주요 기능들이 명확히 구분되도록 색상 대비와 타이포그래피를 적용해 가독성과 편리성을 강화했습니다.
더불어 불필요한 요소는 최소화하고 핵심 인터랙션을 강조하여 깔끔하고 집중도 높은 화면을 구현했으며,
전체 화면에 통일된 디자인 시스템을 적용해 일관성 있는 사용자 경험을 제공했습니다.
해당 화면은 수업 관리와 학생 개별 컨트롤 기능을 중심으로 한 제작 과정입니다.
초기 시안에서는 드래그 자리배치, 파일 전송, 메모, 시험내역 등 기능 단위별 와이어프레임을 구성했고,
저는 이를 바탕으로 최종 디자인에서 직관적인 아이콘 배치와 레이아웃 정돈을 통해
사용 흐름을 한눈에 파악할 수 있도록 개선했습니다.
특히 여러 학생을 선택하여 파일·메시지를 전송하거나, 시험 내역 관리처럼
반복적 업무를 단순화하는 부분에 명확한 버튼 그룹과 컬러 대비를 적용했습니다.
이를 통해 교사가 즉시 기능을 인식하고 사용할 수 있는 편의성과 효율성을 강화했습니다.
design
