UX/UI

Global Sustainability Landing Page

์ง€์†๊ฐ€๋Šฅ์„ฑ ๋ฉ”์‹œ์ง€๋ฅผ ์œ„ํ•œ ๋น„์ฃผ์–ผ ์Šคํ† ๋ฆฌํ…”๋ง๊ณผ UX/UI ๊ฐœ์„  ํ”„๋กœ์ ํŠธ

The LG Sustainability page introduces LGโ€™s vision and efforts to create a better future for all in harmony with nature.

Role

์‹ค๋ฌด ๋””์ž์ด๋„ˆ๋กœ์„œ ์ฐธ์—ฌ(Visual & UI Designer)

Team

๋””์ž์ธ ๋ฆฌ๋”, 2๋ช…์˜ ๋””์ž์ด๋„ˆ, 1๋ช…์˜ ๊ธฐํš์ž๋กœ, 1๋ช…์˜ ๋ชจ์…˜ ๋””์ž์ด๋„ˆ๋กœ ๊ตฌ์„ฑ๋œ TFํŒ€

Timeline

2023. 4 ~ 2023. 8 (4๊ฐœ์›”)

Platform

Web

Projectโ€™s Goal

ํ™˜๊ฒฝ ๋ฉ”์‹œ์ง€๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ „๋‹ฌํ•˜๋ฉด์„œ ๊ธ€๋กœ๋ฒŒ ์›น์‚ฌ์ดํŠธ์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ, ๋žœ๋”ฉํŽ˜์ด์ง€ ๋‚ด์—์„œ ์‹œ๊ฐ ๋ฉ”์„ธ์ง€ ์ค‘์‹ฌ์œผ๋กœ ํ๋ฆ„์„ ์žฌ๊ตฌ์„ฑํ•ด ๋ฉ”์‹œ์ง€ ์ดํ•ด๋„์™€ ๋ชฐ์ž…๋„๋ฅผ ๋†’์˜€์–ด์š”.

Impact

์ผ๊ด€๋œ ๋ธŒ๋žœ๋“œ ๊ฒฝํ—˜์„ ์œ„ํ•œ ์ ‘๊ทผ์„ฑยทUX ํ’ˆ์งˆ ๊ณ ๋„ํ™”

Compliance with global web governance, WCAG ๊ธฐ์ค€์— ์ถฉ์กฑํ•˜๋Š” ์ ‘๊ทผ์„ฑ๊ฐœ์„ 

100%

Improvement in content clarity

25%

์ผ๊ด€์„ฑ ์žˆ๋Š” ๋””์ž์ธ์—์…‹ ๊ณ ๋„ํ™”

๋””์ž์ธ ์‹œ์Šคํ…œ๊ณผ ๋ฐ˜์‘ํ˜• ์ตœ์ ํ™”๋กœ

๋ช…ํ™•ํ•œ ๋ฉ”์„ธ์ง€ ์ „๋‹ฌ๊ณผ ์ง๊ด€์ ์ธ ํƒ์ƒ‰ ๊ฒฝํ—˜์œผ๋กœ

์Šคํ† ๋ฆฌ๋ผ์ธโ€“์ธ๊ฒŒ์ด์ง€๋จผํŠธ ๊ฐ•ํ™”

Discover ๋ฌธ์ œ ํƒ์ƒ‰

๋ฌธ์ œ ํƒ์ƒ‰ Observation

โ€ข์ฝ˜ํ…์ธ  ๊ฐ„ ํ๋ฆ„์ด ๋‹จ์ ˆ๋˜๊ณ ,

โ€ข๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€์˜ ์ผ๊ด€์„ฑ์ด ๋ถ€์กฑํ•˜๋ฉฐ,

โ€ข๋ณ€ํ™” ์—†๋Š” ๋‹จ์กฐ๋กœ์šด ๊ตฌ์„ฑ์œผ๋กœ ์ธํ•ด

์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ํƒ์ƒ‰ํ•˜๋Š” ๊ณผ์ •์—์„œ ์ดํ•ดยท๋ชฐ์ž…์ด ์ง€์†์ ์œผ๋กœ ๋Š์–ด์ง

๋ฆฌ์„œ์น˜ Research & Inputs

โ€ข๊ธฐ์กด Sustainability ์ฝ˜ํ…์ธ ์˜ IA ๋ถ„์„

โ€ข๊ฒฝ์Ÿ์‚ฌ ์ง€์†๊ฐ€๋Šฅ์„ฑ ํŽ˜์ด์ง€ ๋ฒค์น˜๋งˆํ‚น

โ€ข ๊ธ€๋กœ๋ฒŒ ์›น์‚ฌ์ดํŠธ ๋””์ž์ธ ํ†ค & ์ ‘๊ทผ์„ฑ ๊ฐ€์ด๋“œ ๊ฒ€ํ† 

์ธ์‚ฌ์ดํŠธ Insight

์‚ฌ์šฉ์ž๋Š” โ€˜์ •๋ณด ๊ทธ ์ž์ฒดโ€™๋ณด๋‹ค ์ •๋ณด๊ฐ€ ์–ด๋–ป๊ฒŒ ์ด์•ผ๊ธฐํ™”๋˜์–ด ์ „๋‹ฌ๋˜๋Š”์ง€์— ๋”ฐ๋ผ ์ง‘์ค‘๋„๊ฐ€ ํฌ๊ฒŒ ๋‹ฌ๋ผ์ง€๋ฉฐ,

์ด๋ฅผ ์œ„ํ•ด ๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” UX/UI ๊ฐœ์„ ์ด ํ•„์š”ํ•จ.

Define ๋ฌธ์ œ ์ •์˜

Challenge Statements

โ€ข์‚ฌ์šฉ์ž๊ฐ€ ์ •๋ณด์˜ ํ๋ฆ„์„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋”ฐ๋ผ๊ฐˆ ์ˆ˜ ์—†๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€?โ€ข์ถœ์ฒ˜๊ฐ€ ๋‹ค๋ฅธ ์—์…‹๋“ค์ด ์„ž์ด๋ฉฐ ๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€ ์ธ์ง€์— ํ˜ผ๋ž€์ด ์ƒ๊ธฐ๋Š” ์ด์œ ๋Š”?

โ€ข๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค ํ™˜๊ฒฝ์—์„œ ์ ‘๊ทผ์„ฑยท๋ฐ˜์‘ํ˜• ๊ธฐ์ค€ ์ถฉ์กฑ ์‹œ ๋ฉ”์‹œ์ง€ ์†์‹ค์ด ๋ฐœ์ƒํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€?

Design Goal

โ€ข์ •๋ณด์˜ ๋‚ด๋Ÿฌํ‹ฐ๋ธŒ ๊ตฌ์กฐ์™€ UI ํ๋ฆ„์ด ์ •๋ ฌํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ํ™”๋ฉด ๊ฐ„ ์ธ์ง€ ๋‹จ์ ˆ ์ตœ์†Œํ™”

โ€ข๋ธŒ๋žœ๋“œ ํ†คยท๋ฉ”์‹œ์ง€๊ฐ€ ๋ชจ๋“  ์—์…‹์—์„œ ์ผ๊ด€๋˜๊ฒŒ ๋น„์ฃผ์–ผ ํ๋ ˆ์ด์…˜

โ€ข๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค ํ™˜๊ฒฝ์—์„œ ์ตœ๋Œ€ํ•œ ๋งŽ์€ ์‚ฌ๋žŒ์ด ๊ฐ™์€ ๊ฒฝํ—˜์„ ์ œ๊ณต๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์— ์ถฉ์กฑํ•˜๋Š” ๋””์ž์ธ ๊ฒฐ๊ณผ๋ฌผ ์ œ์‹œ

Design Goal ๋ฌธ์ œ ํ•ด๊ฒฐ

Reorganized IA

๋ธŒ๋žœ๋“œ์˜ ํ™˜๊ฒฝ์— ๋Œ€ํ•œ ์ธ์‹์„ ํšจ๊ณผ์ ์œผ๋กœ ์ „๋‹ฌ ํ•˜๊ธฐ ์œ„ํ•ด UI ํ๋ฆ„์„ ๊ฐœ์„ 

Clear CTA

์‚ฌ์šฉ์ž ํ๋ฆ„์„ ์œ ๋„ํ•˜๋Š” ๋ช…ํ™•ํ•œ Call to action ์„ค๊ณ„๋กœ ์ธ๊ฒŒ์ด์ง€๋จผํŠธ ์œ ๋„

Visual Curation

์ง€์† ๊ฐ€๋Šฅ์„ฑ ํ…Œ๋งˆ์— ๋งž๋Š” ์ด๋ฏธ์ง€ ์„ ๋ณ„๊ณผ ์žฌ๊ฐ€๊ณต, ์—์…‹ ์ œ์ž‘

Responsive Design

๋””๋ฐ”์ด์Šค ๋ณ„ ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์„ ๋งŒ์กฑ์‹œํ‚ค๋Š” ๋””์ž์ธ ์ œ์ž‘

Process

UX/UI ๊ฐœ์„  ์•„์ด๋””์–ด์™€ ์ž‘์—… ํ”„๋กœ์„ธ์Šค

ใƒป๋น„์ฃผ์–ผ ์—์…‹ ํ๋ ˆ์ด์…˜: ์ง€์†๊ฐ€๋Šฅ์„ฑ ํ…Œ๋งˆ์— ๋งž๊ณ  ์ผ๊ด€์„ฑ์„ ๊ฐ€์ง„ ๋น„์ฃผ์–ผ ์—์…‹ ํ๋ ˆ์ด์…˜ & ๋ฆฌํ„ฐ์นญํ–ˆ์–ด์š”.

ใƒป์œ ์ง€์œจ์„ ๋†’์ด๋Š” ์ธํ„ฐ๋ž™์…˜ ์„ค๊ณ„: ํ๋ฆ„ ์œ ๋„ ๋งˆ์ดํฌ๋กœ ์ธํ„ฐ๋ž™์…˜(์Šคํฌ๋กค ๋ฆฌ๋นŒ, ํ˜ธ๋ฒ„)๋ฅผ ์ถ”๊ฐ€ํ–ˆ์–ด์š”.

ใƒป๋ฐ˜์‘ํ˜• ์ตœ์ ํ™”: Figma ํ”„๋กœํ† ํƒ€์ž…์œผ๋กœ ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค์—์„œ ์ตœ์ ํ™”๋œ UX๋ฅผ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์–ด์š”.

๋น„์ฃผ์–ผ ์—์…‹ ํ๋ ˆ์ด์…˜๊ณผ UI ๋””์ž์ธ, ๋””์ž์ธ ์‹œ์Šคํ…œ ์ •์˜

Visual-Centric Layout

Colour system & Typography

Dark Grey#333333

White#FFFFFFF

Warm Grey#F6F3EB

ESG Green#75C66B

Active Red#EA1917

Typography

LG EI Headline

LG EI Txt

Bold

SemiboldMedium

Light

ย 

Aa

Highlight

UI ๋””์ž์ธ ํ•˜์ด๋ผ์ดํŠธ

Result

๋žœ๋”ฉํŽ˜์ด์ง€ ๋””์ž์ธ

ใƒป๋ธŒ๋žœ๋“œ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ์‹œ๊ฐ์ ์œผ๋กœ ์ž„ํŒฉํŠธ ์žˆ๋Š” ๊ธ€๋กœ๋ฒŒ ์ง€์†๊ฐ€๋Šฅ์„ฑ ๋žœ๋”ฉ ํŽ˜์ด์ง€๋ฅผ ๋””์ž์ธํ–ˆ์–ด์š”.

ใƒป์‚ฌ์šฉ์ž ํ”Œ๋กœ์šฐ๊ฐ€ ๊ฐœ์„ ๋˜์–ด ๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€ ์ „๋‹ฌ๋ ฅ + ํƒ์ƒ‰ ๊ฒฝํ—˜์ด ํ–ฅ์ƒ๋˜์—ˆ์–ด์š”.

ใƒป๋ฐ˜์‘ํ˜• & ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์— ๋ถ€ํ•ฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์—์„œ๋„ ์ผ๊ด€๋œ ๊ฒฝํ—˜์„ ํ•  ์ˆ˜ ์žˆ์–ด์š”.

Retrospective

ํšŒ๊ณ 

Q.

์ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๋ฌด์—‡์„ ๋ฐฐ์› ๋‚˜์š”?

A.

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๋‹จ์ˆœํžˆ ์ข‹์€ ์ด๋ฏธ์ง€๋ฅผ ๊ณ ๋ฅด๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ โ€˜Why & What โ€“ How โ€“ Proofโ€™ ๊ตฌ์กฐ์— ๋”ฐ๋ผ ๋ฉ”์‹œ์ง€๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ์„ค๊ณ„ํ•  ๋•Œ, ์ „๋‹ฌ๋ ฅ์ด ๊ทน๋Œ€ํ™”๋œ๋‹ค๋Š” ์ ์„ ์ฒด๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๋น„์ฃผ์–ผ ํ๋ ˆ์ด์…˜์ด ๊ณง ๋ธŒ๋žœ๋“œ ์‹ ๋ขฐ์™€ ์ง๊ฒฐ๋œ๋‹ค๋Š” ์‚ฌ์‹ค๋„ ๋ช…ํ™•ํžˆ ์ธ์‹ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , ์ด๋ฏธ์ง€์˜ ํ†ค๊ณผ ์ง„์ •์„ฑ์ด ์ผ๊ด€๋˜์ง€ ์•Š์œผ๋ฉด ๋ฉ”์‹œ์ง€๊ฐ€ ์žฅ์‹์ ์œผ๋กœ ๋ณด์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค.

ย 

ํŠนํžˆ ๋ธŒ๋žœ๋“œ์˜ ์•„์ด๋ดํ‹ฐํ‹ฐ ๋ฆฌ๋‰ด์–ผ ์ดˆ๊ธฐ ๋‹จ๊ณ„์—์„œ ์˜๊ตญ ๋””์ž์ธ ์—์ด์ „์‹œ Wolff Olins์™€์˜ ํ˜‘์—…์„ ํ†ตํ•ด ๋””์ž์ธ ์–ผ๋ผ์ธ์„ ๋งž์ถ”๊ณ  ํ”„๋กœ๋“€์‹ฑ๊ณผ ๊ฐœ์„  ๊ณผ์ •์„ ๊ฒฝํ—˜ํ•œ ๊ฒƒ ๋˜ํ•œ ๊ต‰์žฅํžˆ ํŠน๋ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

ย 

๋งˆ์ง€๋ง‰์œผ๋กœ ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€ ์ถฉ์กฑ ๊ณผ์ •์—์„œ์˜ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช๊ธฐ๋„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ƒ‰ ๋Œ€๋น„, ๋Œ€์ฒด ํ…์ŠคํŠธ, ์ž์‚ฐ ๊ด€๋ฆฌ์˜ ์ค‘์š”์„ฑ์„ ์ดํ•ดํ–ˆ๊ณ , ์—ฌ๋Ÿฌ ์ฐจ๋ก€ ์ˆ˜์ •๊ณผ ๊ฒ€์ฆ์„ ๋ฐ˜๋ณตํ•˜๋ฉฐ, ๋””์ž์ธ ํ”„๋กœ์„ธ์Šค์™€ ์ฒด๊ณ„์ ์ธ ์—์…‹ ๊ด€๋ฆฌ ์—ญ๋Ÿ‰์„ ํ‚ค์šธ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด, ์ฒ˜์Œ ๋ถ€ํ„ฐ ์™„๋ฒฝ์„ ๋ชฉํ‘œ๋กœ ํ•˜๊ธฐ๋ณด๋‹ค, ๋น ๋ฅธ ์‹œ๋„โ€“๊ฒ€์ฆโ€“๊ฐœ์„ ์˜ ๋ฐ˜๋ณต ๊ณผ์ •์ด ๋””์ž์ธ ์™„์„ฑ๋„๋ฅผ ๋†’์ด๋Š” ํ•ต์‹ฌ์ด๋ผ๋Š” ์ ์„ ์‹ค๋ฌด์ ์œผ๋กœ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค.

Appendix

Research Data

๊ธ€๋กœ๋ฒŒ ESG ์บ ํŽ˜์ธ ๋ฆฌ์„œ์น˜๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ Sustainability Movement ์ œ์•ˆ

100์—ฌ๊ฐœ์˜ ๊ธ€๋กœ๋ฒŒ ESG ์ผ€์ด์Šค์Šคํ„ฐ๋””๋ฅผ ์กฐ์‚ฌํ•˜์—ฌ ์ตœ์‹  ์ง€์†๊ฐ€๋Šฅ์„ฑ ํŠธ๋ Œ๋“œ์™€ ๋ธŒ๋žœ๋“œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์ „๋žต์„ ๋ถ„์„ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ LG์˜ ๊ด€์ ์—์„œ ์ง€์†๊ฐ€๋Šฅ์„ฑ์„ โ€˜์ธ์‹โ€™์—์„œ โ€˜์‹ค์ฒœโ€™์œผ๋กœ ํ™•์žฅํ•˜๋Š” Sustainability Movement ๋ฐฉํ–ฅ์„ฑ์„ ์ œ์•ˆํ–ˆ์Šต๋‹ˆ๋‹ค.

From from graphics to digital/web and UI/UX, see the breadth of my creative explorations.

More projects

UX/UI, Visual Producing

3D Virtual Showroom

Explore

UX/UI Case Study

Global Sustainability

Brand Experience

Lifestyle Brand, Audrey-sun

Explore

UX/UI

Global Sustainability Landing Page

์ง€์†๊ฐ€๋Šฅ์„ฑ ๋ฉ”์‹œ์ง€๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•œ ๋น„์ฃผ์–ผ ์Šคํ† ๋ฆฌํ…”๋ง๊ณผ UX/UI ๊ฐœ์„  ํ”„๋กœ์ ํŠธ

The LG Sustainability page introduces LGโ€™s vision and efforts to create a better future for all in harmony with nature.

Role

์‹ค๋ฌด ๋””์ž์ด๋„ˆ๋กœ์„œ ์ฐธ์—ฌ(Visual & UI Designer)

Team

๋””์ž์ธ ๋ฆฌ๋”, 2๋ช…์˜ ๋””์ž์ด๋„ˆ, 1๋ช…์˜ ๊ธฐํš์ž๋กœ, 1๋ช…์˜ ๋ชจ์…˜ ๋””์ž์ด๋„ˆ๋กœ ๊ตฌ์„ฑ๋œ TFํŒ€

Timeline

2023. 4 ~ 2023. 8 (4๊ฐœ์›”)

Platform

Web

Projectโ€™s Goal

ํ™˜๊ฒฝ ๋ฉ”์‹œ์ง€๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ „๋‹ฌํ•˜๋ฉด์„œ ๊ธ€๋กœ๋ฒŒ ์›น์‚ฌ์ดํŠธ์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ, ๋žœ๋”ฉํŽ˜์ด์ง€ ๋‚ด์—์„œ ์‹œ๊ฐ ๋ฉ”์„ธ์ง€ ์ค‘์‹ฌ์œผ๋กœ ํ๋ฆ„์„ ์žฌ๊ตฌ์„ฑํ•ด ๋ฉ”์‹œ์ง€ ์ดํ•ด๋„์™€ ๋ชฐ์ž…๋„๋ฅผ ๋†’์˜€์–ด์š”.

Impact

์ผ๊ด€๋œ ๋ธŒ๋žœ๋“œ ๊ฒฝํ—˜์„ ์œ„ํ•œ ์ ‘๊ทผ์„ฑยทUX ํ’ˆ์งˆ ๊ณ ๋„ํ™”

Compliance with global web governance, WCAG ๊ธฐ์ค€์— ์ถฉ์กฑํ•˜๋Š” ์ ‘๊ทผ์„ฑ๊ฐœ์„ 

100%

Improvement in content clarity

25%

๋ช…ํ™•ํ•œ ๋ฉ”์„ธ์ง€ ์ „๋‹ฌ๊ณผ ์ง๊ด€์ ์ธ ํƒ์ƒ‰ ๊ฒฝํ—˜์œผ๋กœ

์Šคํ† ๋ฆฌ๋ผ์ธโ€“์ธ๊ฒŒ์ด์ง€๋จผํŠธ ๊ฐ•ํ™”

์ผ๊ด€์„ฑ ์žˆ๋Š” ๋””์ž์ธ์—์…‹ ๊ณ ๋„ํ™”

๋””์ž์ธ ์‹œ์Šคํ…œ๊ณผ ๋ฐ˜์‘ํ˜• ์ตœ์ ํ™”๋กœ

Discover ๋ฌธ์ œ ํƒ์ƒ‰

๋ฌธ์ œ ํƒ์ƒ‰ Observation

โ€ข์ฝ˜ํ…์ธ  ๊ฐ„ ํ๋ฆ„์ด ๋‹จ์ ˆ๋˜๊ณ ,

โ€ข๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€์˜ ์ผ๊ด€์„ฑ์ด ๋ถ€์กฑํ•˜๋ฉฐ,

โ€ข๋ณ€ํ™” ์—†๋Š” ๋‹จ์กฐ๋กœ์šด ๊ตฌ์„ฑ์œผ๋กœ ์ธํ•ด

์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ํƒ์ƒ‰ํ•˜๋Š” ๊ณผ์ •์—์„œ ์ดํ•ดยท๋ชฐ์ž…์ด ์ง€์†์ ์œผ๋กœ ๋Š์–ด์ง

๋ฆฌ์„œ์น˜ Research & Inputs

โ€ข๊ธฐ์กด Sustainability ์ฝ˜ํ…์ธ ์˜ IA ๋ถ„์„

โ€ข๊ฒฝ์Ÿ์‚ฌ ์ง€์†๊ฐ€๋Šฅ์„ฑ ํŽ˜์ด์ง€ ๋ฒค์น˜๋งˆํ‚น

โ€ข ๊ธ€๋กœ๋ฒŒ ์›น์‚ฌ์ดํŠธ ๋””์ž์ธ ํ†ค & ์ ‘๊ทผ์„ฑ ๊ฐ€์ด๋“œ ๊ฒ€ํ† 

์ธ์‚ฌ์ดํŠธ Insight

์‚ฌ์šฉ์ž๋Š” โ€˜์ •๋ณด ๊ทธ ์ž์ฒดโ€™๋ณด๋‹ค ์ •๋ณด๊ฐ€ ์–ด๋–ป๊ฒŒ ์ด์•ผ๊ธฐํ™”๋˜์–ด ์ „๋‹ฌ๋˜๋Š”์ง€์— ๋”ฐ๋ผ ์ง‘์ค‘๋„๊ฐ€ ํฌ๊ฒŒ ๋‹ฌ๋ผ์ง€๋ฉฐ,

์ด๋ฅผ ์œ„ํ•ด ๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” UX/UI ๊ฐœ์„ ์ด ํ•„์š”ํ•จ.

Define ๋ฌธ์ œ ์ •์˜

Challenge Statements

โ€ข์‚ฌ์šฉ์ž๊ฐ€ ์ •๋ณด์˜ ํ๋ฆ„์„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋”ฐ๋ผ๊ฐˆ ์ˆ˜ ์—†๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€?โ€ข์ถœ์ฒ˜๊ฐ€ ๋‹ค๋ฅธ ์—์…‹๋“ค์ด ์„ž์ด๋ฉฐ ๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€ ์ธ์ง€์— ํ˜ผ๋ž€์ด ์ƒ๊ธฐ๋Š” ์ด์œ ๋Š”?

โ€ข๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค ํ™˜๊ฒฝ์—์„œ ์ ‘๊ทผ์„ฑยท๋ฐ˜์‘ํ˜• ๊ธฐ์ค€ ์ถฉ์กฑ ์‹œ ๋ฉ”์‹œ์ง€ ์†์‹ค์ด ๋ฐœ์ƒํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€?

Design Goal

โ€ข์ •๋ณด์˜ ๋‚ด๋Ÿฌํ‹ฐ๋ธŒ ๊ตฌ์กฐ์™€ UI ํ๋ฆ„์ด ์ •๋ ฌํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ํ™”๋ฉด ๊ฐ„ ์ธ์ง€ ๋‹จ์ ˆ ์ตœ์†Œํ™”

โ€ข๋ธŒ๋žœ๋“œ ํ†คยท๋ฉ”์‹œ์ง€๊ฐ€ ๋ชจ๋“  ์—์…‹์—์„œ ์ผ๊ด€๋˜๊ฒŒ ๋น„์ฃผ์–ผ ํ๋ ˆ์ด์…˜

โ€ข๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค ํ™˜๊ฒฝ์—์„œ ์ตœ๋Œ€ํ•œ ๋งŽ์€ ์‚ฌ๋žŒ์ด ๊ฐ™์€ ๊ฒฝํ—˜์„ ์ œ๊ณต๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์— ์ถฉ์กฑํ•˜๋Š” ๋””์ž์ธ ๊ฒฐ๊ณผ๋ฌผ ์ œ์‹œ

Design Goal ๋ฌธ์ œ ํ•ด๊ฒฐ

Reorganized IA

๋ธŒ๋žœ๋“œ์˜ ํ™˜๊ฒฝ์— ๋Œ€ํ•œ ์ธ์‹์„ ํšจ๊ณผ์ ์œผ๋กœ ์ „๋‹ฌ ํ•˜๊ธฐ ์œ„ํ•ด UI ํ๋ฆ„์„ ๊ฐœ์„ 

Clear CTA

์‚ฌ์šฉ์ž ํ๋ฆ„์„ ์œ ๋„ํ•˜๋Š” ๋ช…ํ™•ํ•œ Call to action ์„ค๊ณ„๋กœ ์ธ๊ฒŒ์ด์ง€๋จผํŠธ ์œ ๋„

Visual Curation

์ง€์† ๊ฐ€๋Šฅ์„ฑ ํ…Œ๋งˆ์— ๋งž๋Š” ์ด๋ฏธ์ง€ ์„ ๋ณ„๊ณผ ์žฌ๊ฐ€๊ณต, ์—์…‹ ์ œ์ž‘

Responsive Design

๋””๋ฐ”์ด์Šค ๋ณ„ ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์„ ๋งŒ์กฑ์‹œํ‚ค๋Š” ๋””์ž์ธ ์ œ์ž‘

Process

UX/UI ๊ฐœ์„  ์•„์ด๋””์–ด์™€ ์ž‘์—… ํ”„๋กœ์„ธ์Šค

ใƒป๋น„์ฃผ์–ผ ์—์…‹ ํ๋ ˆ์ด์…˜: ์ง€์†๊ฐ€๋Šฅ์„ฑ ํ…Œ๋งˆ์— ๋งž๊ณ  ์ผ๊ด€์„ฑ์„ ๊ฐ€์ง„ ๋น„์ฃผ์–ผ ์—์…‹ ํ๋ ˆ์ด์…˜ & ๋ฆฌํ„ฐ์นญํ–ˆ์–ด์š”.

ใƒป์œ ์ง€์œจ์„ ๋†’์ด๋Š” ์ธํ„ฐ๋ž™์…˜ ์„ค๊ณ„: ํ๋ฆ„ ์œ ๋„ ๋งˆ์ดํฌ๋กœ ์ธํ„ฐ๋ž™์…˜(์Šคํฌ๋กค ๋ฆฌ๋นŒ, ํ˜ธ๋ฒ„)๋ฅผ ์ถ”๊ฐ€ํ–ˆ์–ด์š”.

ใƒป๋ฐ˜์‘ํ˜• ์ตœ์ ํ™”: Figma ํ”„๋กœํ† ํƒ€์ž…์œผ๋กœ ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค์—์„œ ์ตœ์ ํ™”๋œ UX๋ฅผ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์–ด์š”.

๋น„์ฃผ์–ผ ์—์…‹ ํ๋ ˆ์ด์…˜๊ณผ UI ๋””์ž์ธ, ๋””์ž์ธ ์‹œ์Šคํ…œ ์ •์˜

Visual-Centric Layout

Highlight

UI ๋””์ž์ธ ํ•˜์ด๋ผ์ดํŠธ

Result

๋žœ๋”ฉํŽ˜์ด์ง€ ๋””์ž์ธ

ใƒป๋ธŒ๋žœ๋“œ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ์‹œ๊ฐ์ ์œผ๋กœ ์ž„ํŒฉํŠธ ์žˆ๋Š” ๊ธ€๋กœ๋ฒŒ ์ง€์†๊ฐ€๋Šฅ์„ฑ ๋žœ๋”ฉ ํŽ˜์ด์ง€๋ฅผ ๋””์ž์ธํ–ˆ์–ด์š”.

ใƒป์‚ฌ์šฉ์ž ํ”Œ๋กœ์šฐ๊ฐ€ ๊ฐœ์„ ๋˜์–ด ๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€ ์ „๋‹ฌ๋ ฅ + ํƒ์ƒ‰ ๊ฒฝํ—˜์ด ํ–ฅ์ƒ๋˜์—ˆ์–ด์š”.

ใƒป๋ฐ˜์‘ํ˜• & ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์— ๋ถ€ํ•ฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์—์„œ๋„ ์ผ๊ด€๋œ ๊ฒฝํ—˜์„ ํ•  ์ˆ˜ ์žˆ์–ด์š”.

Retrospective

ํšŒ๊ณ 

Q.

์ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๋ฌด์—‡์„ ๋ฐฐ์› ๋‚˜์š”?

A.

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๋‹จ์ˆœํžˆ ์ข‹์€ ์ด๋ฏธ์ง€๋ฅผ ๊ณ ๋ฅด๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ โ€˜Why & What โ€“ How โ€“ Proofโ€™ ๊ตฌ์กฐ์— ๋”ฐ๋ผ ๋ฉ”์‹œ์ง€๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ์„ค๊ณ„ํ•  ๋•Œ, ์ „๋‹ฌ๋ ฅ์ด ๊ทน๋Œ€ํ™”๋œ๋‹ค๋Š” ์ ์„ ์ฒด๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๋น„์ฃผ์–ผ ํ๋ ˆ์ด์…˜์ด ๊ณง ๋ธŒ๋žœ๋“œ ์‹ ๋ขฐ์™€ ์ง๊ฒฐ๋œ๋‹ค๋Š” ์‚ฌ์‹ค๋„ ๋ช…ํ™•ํžˆ ์ธ์‹ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , ์ด๋ฏธ์ง€์˜ ํ†ค๊ณผ ์ง„์ •์„ฑ์ด ์ผ๊ด€๋˜์ง€ ์•Š์œผ๋ฉด ๋ฉ”์‹œ์ง€๊ฐ€ ์žฅ์‹์ ์œผ๋กœ ๋ณด์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค.

ย 

ํŠนํžˆ ๋ธŒ๋žœ๋“œ์˜ ์•„์ด๋ดํ‹ฐํ‹ฐ ๋ฆฌ๋‰ด์–ผ ์ดˆ๊ธฐ ๋‹จ๊ณ„์—์„œ ์˜๊ตญ ๋””์ž์ธ ์—์ด์ „์‹œ Wolff Olins์™€์˜ ํ˜‘์—…์„ ํ†ตํ•ด ๋””์ž์ธ ์–ผ๋ผ์ธ์„ ๋งž์ถ”๊ณ  ํ”„๋กœ๋“€์‹ฑ๊ณผ ๊ฐœ์„  ๊ณผ์ •์„ ๊ฒฝํ—˜ํ•œ ๊ฒƒ ๋˜ํ•œ ๊ต‰์žฅํžˆ ํŠน๋ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

ย 

๋งˆ์ง€๋ง‰์œผ๋กœ ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€ ์ถฉ์กฑ ๊ณผ์ •์—์„œ์˜ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช๊ธฐ๋„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ƒ‰ ๋Œ€๋น„, ๋Œ€์ฒด ํ…์ŠคํŠธ, ์ž์‚ฐ ๊ด€๋ฆฌ์˜ ์ค‘์š”์„ฑ์„ ์ดํ•ดํ–ˆ๊ณ , ์—ฌ๋Ÿฌ ์ฐจ๋ก€ ์ˆ˜์ •๊ณผ ๊ฒ€์ฆ์„ ๋ฐ˜๋ณตํ•˜๋ฉฐ, ๋””์ž์ธ ํ”„๋กœ์„ธ์Šค์™€ ์ฒด๊ณ„์ ์ธ ์—์…‹ ๊ด€๋ฆฌ ์—ญ๋Ÿ‰์„ ํ‚ค์šธ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด, ์ฒ˜์Œ ๋ถ€ํ„ฐ ์™„๋ฒฝ์„ ๋ชฉํ‘œ๋กœ ํ•˜๊ธฐ๋ณด๋‹ค, ๋น ๋ฅธ ์‹œ๋„โ€“๊ฒ€์ฆโ€“๊ฐœ์„ ์˜ ๋ฐ˜๋ณต ๊ณผ์ •์ด ๋””์ž์ธ ์™„์„ฑ๋„๋ฅผ ๋†’์ด๋Š” ํ•ต์‹ฌ์ด๋ผ๋Š” ์ ์„ ์‹ค๋ฌด์ ์œผ๋กœ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค.

Appendix

Research Data

๊ธ€๋กœ๋ฒŒ ESG ์บ ํŽ˜์ธ ๋ฆฌ์„œ์น˜๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ Sustainability Movement ์ œ์•ˆ

100์—ฌ๊ฐœ์˜ ๊ธ€๋กœ๋ฒŒ ESG ์ผ€์ด์Šค์Šคํ„ฐ๋””๋ฅผ ์กฐ์‚ฌํ•˜์—ฌ ์ตœ์‹  ์ง€์†๊ฐ€๋Šฅ์„ฑ ํŠธ๋ Œ๋“œ์™€ ๋ธŒ๋žœ๋“œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์ „๋žต์„ ๋ถ„์„ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ LG์˜ ๊ด€์ ์—์„œ ์ง€์†๊ฐ€๋Šฅ์„ฑ์„ โ€˜์ธ์‹โ€™์—์„œ โ€˜์‹ค์ฒœโ€™์œผ๋กœ ํ™•์žฅํ•˜๋Š” Sustainability Movement ๋ฐฉํ–ฅ์„ฑ์„ ์ œ์•ˆํ–ˆ์Šต๋‹ˆ๋‹ค.

From from graphics to digital/web and UI/UX, see the breadth of my creative explorations.

More projects

UX/UI, Visual Producing

3D Virtual Showroom

Explore

UX/UI Case Study

Global Sustainability

Brand Experience

Lifestyle Brand, Audrey-sun

Explore

UX/UI

Global Sustainability Landing Page

์ง€์†๊ฐ€๋Šฅ์„ฑ ๋ฉ”์‹œ์ง€๋ฅผ ์œ„ํ•œ ๋น„์ฃผ์–ผ ์Šคํ† ๋ฆฌํ…”๋ง๊ณผ UX/UI ๊ฐœ์„  ํ”„๋กœ์ ํŠธ

The LG Sustainability page introduces LGโ€™s vision and efforts to create a better future for all in harmony with nature.

Role

์‹ค๋ฌด ๋””์ž์ด๋„ˆ๋กœ์„œ ์ฐธ์—ฌ(Visual & UI Designer)

Team

๋””์ž์ธ ๋ฆฌ๋”, 2๋ช…์˜ ๋””์ž์ด๋„ˆ, 1๋ช…์˜ ๊ธฐํš์ž๋กœ, 1๋ช…์˜ ๋ชจ์…˜ ๋””์ž์ด๋„ˆ๋กœ ๊ตฌ์„ฑ๋œ TFํŒ€

Timeline

2023. 4 ~ 2023. 8 (4๊ฐœ์›”)

Platform

Web

Key responsibilities

๐Ÿ’ก UX/UI Design ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค์— ์ตœ์ ํ™”๋œ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ ์„ค๊ณ„, ์‚ฌ์šฉ์ž ํ๋ฆ„ ์œ ๋„, ๋งˆ์ดํฌ๋กœ ์ธํ„ฐ๋ž™์…˜ ์ ์šฉ

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Image Curation ์ฝ˜์…‰์— ๋งž๋Š” ์‹œ๊ฐ ์ž์‚ฐ์„ ์„ ๋ณ„/๋ฆฌํ„ฐ์นญ

๐Ÿช„ Hand-off Doc ์ต์ŠคํฌํŠธ ์„ธํŠธ, ์‚ฐ์ถœ๋ฌผ ์ •๋ฆฌ ๋ฐ ALT ํ…์ŠคํŠธ ๊ด€๋ฆฌ ๋ฐ ์ „๋‹ฌ

Projectโ€™s Goal

ํ™˜๊ฒฝ ๋ฉ”์‹œ์ง€๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ „๋‹ฌํ•˜๋ฉด์„œ ๊ธ€๋กœ๋ฒŒ ์›น์‚ฌ์ดํŠธ์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ, ๋žœ๋”ฉํŽ˜์ด์ง€ ๋‚ด์—์„œ ์‹œ๊ฐ ๋ฉ”์„ธ์ง€ ์ค‘์‹ฌ์œผ๋กœ ํ๋ฆ„์„ ์žฌ๊ตฌ์„ฑํ•ด ๋ฉ”์‹œ์ง€ ์ดํ•ด๋„์™€ ๋ชฐ์ž…๋„๋ฅผ ๋†’์˜€์–ด์š”.

Impact

์ผ๊ด€๋œ ๋ธŒ๋žœ๋“œ ๊ฒฝํ—˜์„ ์œ„ํ•œ ์ ‘๊ทผ์„ฑยทUX ํ’ˆ์งˆ ๊ณ ๋„ํ™”

Compliance with global web governance, WCAG ๊ธฐ์ค€์— ์ถฉ์กฑํ•˜๋Š” ์ ‘๊ทผ์„ฑ๊ฐœ์„ 

100%

Improvement in content clarity

25%

๋ช…ํ™•ํ•œ ๋ฉ”์„ธ์ง€ ์ „๋‹ฌ๊ณผ ์ง๊ด€์ ์ธ ํƒ์ƒ‰ ๊ฒฝํ—˜์œผ๋กœ

์Šคํ† ๋ฆฌ๋ผ์ธโ€“์ธ๊ฒŒ์ด์ง€๋จผํŠธ ๊ฐ•ํ™”

๋””์ž์ธ ์‹œ์Šคํ…œ๊ณผ ๋ฐ˜์‘ํ˜• ์ตœ์ ํ™”๋กœ

์ผ๊ด€์„ฑ ์žˆ๋Š” ๋””์ž์ธ์—์…‹ ๊ณ ๋„ํ™”

Discover ๋ฌธ์ œ ํƒ์ƒ‰

Observation

โ€ข์ฝ˜ํ…์ธ  ๊ฐ„ ํ๋ฆ„์ด ๋‹จ์ ˆ๋˜๊ณ ,

โ€ข๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€์˜ ์ผ๊ด€์„ฑ์ด ๋ถ€์กฑํ•˜๋ฉฐ,

โ€ข๋ณ€ํ™” ์—†๋Š” ๋‹จ์กฐ๋กœ์šด ๊ตฌ์„ฑ์œผ๋กœ ์ธํ•ด

์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ํƒ์ƒ‰ํ•˜๋Š” ๊ณผ์ •์—์„œ ์ดํ•ดยท๋ชฐ์ž…์ด ์ง€์†์ ์œผ๋กœ ๋Š์–ด์ง

๋ฆฌ์„œ์น˜ Research & Inputs

โ€ข๊ธฐ์กด Sustainability ์ฝ˜ํ…์ธ ์˜ IA ๋ถ„์„

โ€ข๊ฒฝ์Ÿ์‚ฌ ์ง€์†๊ฐ€๋Šฅ์„ฑ ํŽ˜์ด์ง€ ๋ฒค์น˜๋งˆํ‚น

โ€ข ๊ธ€๋กœ๋ฒŒ ์›น์‚ฌ์ดํŠธ ๋””์ž์ธ ํ†ค & ์ ‘๊ทผ์„ฑ ๊ฐ€์ด๋“œ ๊ฒ€ํ† 

์ธ์‚ฌ์ดํŠธ Insight

์‚ฌ์šฉ์ž๋Š” โ€˜์ •๋ณด ๊ทธ ์ž์ฒดโ€™๋ณด๋‹ค ์ •๋ณด๊ฐ€ ์–ด๋–ป๊ฒŒ ์ด์•ผ๊ธฐํ™”๋˜์–ด ์ „๋‹ฌ๋˜๋Š”์ง€์— ๋”ฐ๋ผ ์ง‘์ค‘๋„๊ฐ€ ํฌ๊ฒŒ ๋‹ฌ๋ผ์ง€๋ฉฐ,

์ด๋ฅผ ์œ„ํ•ด ๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” UX/UI ๊ฐœ์„ ์ด ํ•„์š”ํ•จ.

Define ๋ฌธ์ œ ์ •์˜

Challenge Statements

โ€ข์‚ฌ์šฉ์ž๊ฐ€ ์ •๋ณด์˜ ํ๋ฆ„์„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋”ฐ๋ผ๊ฐˆ ์ˆ˜ ์—†๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€?โ€ข์ถœ์ฒ˜๊ฐ€ ๋‹ค๋ฅธ ์—์…‹๋“ค์ด ์„ž์ด๋ฉฐ ๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€ ์ธ์ง€์— ํ˜ผ๋ž€์ด ์ƒ๊ธฐ๋Š” ์ด์œ ๋Š”?

โ€ข๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค ํ™˜๊ฒฝ์—์„œ ์ ‘๊ทผ์„ฑยท๋ฐ˜์‘ํ˜• ๊ธฐ์ค€ ์ถฉ์กฑ ์‹œ ๋ฉ”์‹œ์ง€ ์†์‹ค์ด ๋ฐœ์ƒํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€?

Design Goal

โ€ข์ •๋ณด์˜ ๋‚ด๋Ÿฌํ‹ฐ๋ธŒ ๊ตฌ์กฐ์™€ UI ํ๋ฆ„์ด ์ •๋ ฌํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ํ™”๋ฉด ๊ฐ„ ์ธ์ง€ ๋‹จ์ ˆ ์ตœ์†Œํ™”

โ€ข๋ธŒ๋žœ๋“œ ํ†คยท๋ฉ”์‹œ์ง€๊ฐ€ ๋ชจ๋“  ์—์…‹์—์„œ ์ผ๊ด€๋˜๊ฒŒ ๋น„์ฃผ์–ผ ํ๋ ˆ์ด์…˜

โ€ข๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค ํ™˜๊ฒฝ์—์„œ ์ตœ๋Œ€ํ•œ ๋งŽ์€ ์‚ฌ๋žŒ์ด ๊ฐ™์€ ๊ฒฝํ—˜์„ ์ œ๊ณต๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์— ์ถฉ์กฑํ•˜๋Š” ๋””์ž์ธ ๊ฒฐ๊ณผ๋ฌผ ์ œ์‹œ

Design Goal ๋ฌธ์ œ ํ•ด๊ฒฐ

Reorganized IA

๋ธŒ๋žœ๋“œ์˜ ํ™˜๊ฒฝ์— ๋Œ€ํ•œ ์ธ์‹์„ ํšจ๊ณผ์ ์œผ๋กœ ์ „๋‹ฌ ํ•˜๊ธฐ ์œ„ํ•ด UI ํ๋ฆ„์„ ๊ฐœ์„ 

Clear CTA

์‚ฌ์šฉ์ž ํ๋ฆ„์„ ์œ ๋„ํ•˜๋Š” ๋ช…ํ™•ํ•œ Call to action ์„ค๊ณ„๋กœ ์ธ๊ฒŒ์ด์ง€๋จผํŠธ ์œ ๋„

Visual Curation

์ง€์† ๊ฐ€๋Šฅ์„ฑ ํ…Œ๋งˆ์— ๋งž๋Š” ์ด๋ฏธ์ง€ ์„ ๋ณ„๊ณผ ์žฌ๊ฐ€๊ณต, ์—์…‹ ์ œ์ž‘

Responsive Design

๋””๋ฐ”์ด์Šค ๋ณ„ ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์„ ๋งŒ์กฑ์‹œํ‚ค๋Š” ๋””์ž์ธ ์ œ์ž‘

Process

UX/UI ๊ฐœ์„  ์•„์ด๋””์–ด์™€ ์ž‘์—… ํ”„๋กœ์„ธ์Šค

ใƒป๋น„์ฃผ์–ผ ์—์…‹ ํ๋ ˆ์ด์…˜: ์ง€์†๊ฐ€๋Šฅ์„ฑ ํ…Œ๋งˆ์— ๋งž๊ณ  ์ผ๊ด€์„ฑ์„ ๊ฐ€์ง„ ๋น„์ฃผ์–ผ ์—์…‹ ํ๋ ˆ์ด์…˜ & ๋ฆฌํ„ฐ์นญํ–ˆ์–ด์š”.

ใƒป์œ ์ง€์œจ์„ ๋†’์ด๋Š” ์ธํ„ฐ๋ž™์…˜ ์„ค๊ณ„: ํ๋ฆ„ ์œ ๋„ ๋งˆ์ดํฌ๋กœ ์ธํ„ฐ๋ž™์…˜(์Šคํฌ๋กค ๋ฆฌ๋นŒ, ํ˜ธ๋ฒ„)๋ฅผ ์ถ”๊ฐ€ํ–ˆ์–ด์š”.

ใƒป๋ฐ˜์‘ํ˜• ์ตœ์ ํ™”: Figma ํ”„๋กœํ† ํƒ€์ž…์œผ๋กœ ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค์—์„œ ์ตœ์ ํ™”๋œ UX๋ฅผ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์–ด์š”.

๋น„์ฃผ์–ผ ์—์…‹ ํ๋ ˆ์ด์…˜๊ณผ UI ๋””์ž์ธ, ๋””์ž์ธ ์‹œ์Šคํ…œ ์ •์˜

Visual-Centric Layout

Colour system & Typography

Dark Grey#333333

White#FFFFFFF

Warm Grey#F6F3EB

ESG Green#75C66B

Active Red#EA1917

Typography

LG EI Headline

LG EI Txt

Bold

SemiboldMedium

Light

ย 

Aa

Highlight

UI ๋””์ž์ธ ํ•˜์ด๋ผ์ดํŠธ

Result

๋žœ๋”ฉํŽ˜์ด์ง€ ๋””์ž์ธ

ใƒป๋ธŒ๋žœ๋“œ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ์‹œ๊ฐ์ ์œผ๋กœ ์ž„ํŒฉํŠธ ์žˆ๋Š” ๊ธ€๋กœ๋ฒŒ ์ง€์†๊ฐ€๋Šฅ์„ฑ ๋žœ๋”ฉ ํŽ˜์ด์ง€๋ฅผ ๋””์ž์ธํ–ˆ์–ด์š”.

ใƒป์‚ฌ์šฉ์ž ํ”Œ๋กœ์šฐ๊ฐ€ ๊ฐœ์„ ๋˜์–ด ๋ธŒ๋žœ๋“œ ๋ฉ”์‹œ์ง€ ์ „๋‹ฌ๋ ฅ + ํƒ์ƒ‰ ๊ฒฝํ—˜์ด ํ–ฅ์ƒ๋˜์—ˆ์–ด์š”.

ใƒป๋ฐ˜์‘ํ˜• & ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์— ๋ถ€ํ•ฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์—์„œ๋„ ์ผ๊ด€๋œ ๊ฒฝํ—˜์„ ํ•  ์ˆ˜ ์žˆ์–ด์š”.

Retrospective

ํšŒ๊ณ 

Q.

์ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๋ฌด์—‡์„ ๋ฐฐ์› ๋‚˜์š”?

A.

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๋‹จ์ˆœํžˆ ์ข‹์€ ์ด๋ฏธ์ง€๋ฅผ ๊ณ ๋ฅด๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ โ€˜Why & What โ€“ How โ€“ Proofโ€™ ๊ตฌ์กฐ์— ๋”ฐ๋ผ ๋ฉ”์‹œ์ง€๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ์„ค๊ณ„ํ•  ๋•Œ, ์ „๋‹ฌ๋ ฅ์ด ๊ทน๋Œ€ํ™”๋œ๋‹ค๋Š” ์ ์„ ์ฒด๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๋น„์ฃผ์–ผ ํ๋ ˆ์ด์…˜์ด ๊ณง ๋ธŒ๋žœ๋“œ ์‹ ๋ขฐ์™€ ์ง๊ฒฐ๋œ๋‹ค๋Š” ์‚ฌ์‹ค๋„ ๋ช…ํ™•ํžˆ ์ธ์‹ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , ์ด๋ฏธ์ง€์˜ ํ†ค๊ณผ ์ง„์ •์„ฑ์ด ์ผ๊ด€๋˜์ง€ ์•Š์œผ๋ฉด ๋ฉ”์‹œ์ง€๊ฐ€ ์žฅ์‹์ ์œผ๋กœ ๋ณด์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค.

ย 

ํŠนํžˆ ๋ธŒ๋žœ๋“œ์˜ ์•„์ด๋ดํ‹ฐํ‹ฐ ๋ฆฌ๋‰ด์–ผ ์ดˆ๊ธฐ ๋‹จ๊ณ„์—์„œ ์˜๊ตญ ๋””์ž์ธ ์—์ด์ „์‹œ Wolff Olins์™€์˜ ํ˜‘์—…์„ ํ†ตํ•ด ๋””์ž์ธ ์–ผ๋ผ์ธ์„ ๋งž์ถ”๊ณ  ํ”„๋กœ๋“€์‹ฑ๊ณผ ๊ฐœ์„  ๊ณผ์ •์„ ๊ฒฝํ—˜ํ•œ ๊ฒƒ ๋˜ํ•œ ๊ต‰์žฅํžˆ ํŠน๋ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

ย 

๋งˆ์ง€๋ง‰์œผ๋กœ ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€ ์ถฉ์กฑ ๊ณผ์ •์—์„œ์˜ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช๊ธฐ๋„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ƒ‰ ๋Œ€๋น„, ๋Œ€์ฒด ํ…์ŠคํŠธ, ์ž์‚ฐ ๊ด€๋ฆฌ์˜ ์ค‘์š”์„ฑ์„ ์ดํ•ดํ–ˆ๊ณ , ์—ฌ๋Ÿฌ ์ฐจ๋ก€ ์ˆ˜์ •๊ณผ ๊ฒ€์ฆ์„ ๋ฐ˜๋ณตํ•˜๋ฉฐ, ๋””์ž์ธ ํ”„๋กœ์„ธ์Šค์™€ ์ฒด๊ณ„์ ์ธ ์—์…‹ ๊ด€๋ฆฌ ์—ญ๋Ÿ‰์„ ํ‚ค์šธ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด, ์ฒ˜์Œ ๋ถ€ํ„ฐ ์™„๋ฒฝ์„ ๋ชฉํ‘œ๋กœ ํ•˜๊ธฐ๋ณด๋‹ค, ๋น ๋ฅธ ์‹œ๋„โ€“๊ฒ€์ฆโ€“๊ฐœ์„ ์˜ ๋ฐ˜๋ณต ๊ณผ์ •์ด ๋””์ž์ธ ์™„์„ฑ๋„๋ฅผ ๋†’์ด๋Š” ํ•ต์‹ฌ์ด๋ผ๋Š” ์ ์„ ์‹ค๋ฌด์ ์œผ๋กœ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค.

Appendix

Research Data

๊ธ€๋กœ๋ฒŒ ESG ์บ ํŽ˜์ธ ๋ฆฌ์„œ์น˜๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ Sustainability Movement ์ œ์•ˆ

100์—ฌ๊ฐœ์˜ ๊ธ€๋กœ๋ฒŒ ESG ์ผ€์ด์Šค์Šคํ„ฐ๋””๋ฅผ ์กฐ์‚ฌํ•˜์—ฌ ์ตœ์‹  ์ง€์†๊ฐ€๋Šฅ์„ฑ ํŠธ๋ Œ๋“œ์™€ ๋ธŒ๋žœ๋“œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์ „๋žต์„ ๋ถ„์„ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ LG์˜ ๊ด€์ ์—์„œ ์ง€์†๊ฐ€๋Šฅ์„ฑ์„ โ€˜์ธ์‹โ€™์—์„œ โ€˜์‹ค์ฒœโ€™์œผ๋กœ ํ™•์žฅํ•˜๋Š” Sustainability Movement ๋ฐฉํ–ฅ์„ฑ์„ ์ œ์•ˆํ–ˆ์Šต๋‹ˆ๋‹ค.

From from graphics to digital/web and UI/UX, see the breadth of my creative explorations.

More projects

UX/UI, Visual Producing

3D Virtual Showroom

Explore

UX/UI Case Study

Global Sustainability

magazine spread

Brand Experience

Lifestyle Brand, Audrey-sun

Explore