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 ๋ฐฉํฅ์ฑ์ ์ ์ํ์ต๋๋ค.























