피그마(Site)로 웹사이트를 직접 제작해보며 얻은 팁

 

 

 

 

안녕하세요! 😊 청년취업사관학교 DAY11 강의 요약내용을 들고 왔는데요. 이번 시간에는 정말 기대했던 피그마(Figma)를 활용한 웹사이트 디자인 실습이 있었어요. 솔직히 평소에도 웹사이트를 직접 만들어보고 싶다는 로망이 있었는데, 이렇게 직접 기회를 얻으니 두근거렸습니다. 바로 본론으로 넘어가겠습니다!

 

나만의 웹사이트, 피그마로 설계하다 💡

강사님께서는 템플릿 사용을 지양하고, 온전히 본인이 원하는 웹사이트를 자유롭게 디자인해보라고 하셨어요. 이 말을 듣고 바로 머릿속에 떠오른 건 제가 정말 좋아하는 게임 캐릭터인 '징크스'였어요. 징크스는 워낙 개성 강하고 역동적인 캐릭터라, 화려한 디자인과 인터랙션 효과를 연습하기에 딱 좋겠다 싶었죠.

피그마의 다양한 기능을 활용해서 징크스의 특성을 살린 웹사이트를 구상하기 시작했습니다. 이미지와 텍스트 배치부터 시작해서, 마우스를 올리면 요소들이 움직이거나 색상이 변하는 인터랙션(Interaction)까지 적용해보니, 정말 살아있는 웹페이지를 만드는 것 같았어요. '내가 이걸 직접 만들고 있다니!' 하는 생각에 시간 가는 줄 몰랐답니다. 제 눈에는 세상에서 가장 멋진 징크스 소개 페이지가 탄생하고 있었죠! 

 

화려함 속에 숨겨진 과잉의 그림자 ⚠️

하지만 저의 열정이 너무 과했던 걸까요? 징크스의 매력을 전부 보여주고 싶은 마음에, 웹사이트에 정말 많은 요소들을 채워 넣었습니다. 온갖 화려한 효과와 이미지, 텍스트가 페이지를 가득 채웠죠. 저는 '이 정도면 완벽해!'라고 생각했어요. 그런데 강사님의 피드백은 예상과 달랐습니다.

강사님께서는 제 웹사이트에 대해 "요소들이 너무 많아 시선이 분산되고 집중하기 어렵다" 는 말씀해주셨어요. 그리고 가장 중요한 조언으로 "무언가를 더하기보다는 덜어낼 필요가 있다"고 말씀하셨네요. 처음에는 조금 충격이었어요. '이게 왜?' 싶었거든요. 결과적으로, 덜어낼 수록 전달하고자 하는 내용이 더 잘보인다는 이유라고 하셨네요.

💡 핵심 교훈!
웹 디자인에서 '사용자 경험(UX)'은 미적인 요소만큼이나 중요합니다. 아무리 멋진 디자인이라도 사용자에게 혼란을 주거나 정보를 찾기 어렵게 만든다면 좋은 디자인이라고 할 수 없다는 것을 깨달았어요.

https://pose-clasp-40738573.figma.site/

Untitled

제가 만든 리그오브레전드 게임의 징크스 소개 사이트에요

디자인, '덜어냄의 미학'을 배우다 ✨

강사님의 피드백과 다른 수강생들의 깔끔한 디자인을 보면서, 저는 비로소 '덜어냄의 미학'을 이해하게 되었습니다. 제가 만든 징크스 페이지는 너무 많은 정보와 효과 때문에 오히려 캐릭터의 매력을 제대로 전달하지 못하고 있었던 거죠. 웹사이트는 보는 사람의 시선을 고려해야 하는데, 저는 오직 제 감에만 집중을 했어서 좋지않은 디자인을 했네요.

징크스 소개페이지 수정 포인트 📝

• 시선 유도: 가장 중요한 정보가 무엇인지 파악하고, 그 정보가 가장 먼저 눈에 띄도록 배치.
• 불필요한 요소 제거: 과도한 애니메이션, 중복되는 이미지, 너무 작은 폰트 등 가독성을 해치는 요소들을 과감히 삭제.
• 여백의 미: 요소들 사이에 충분한 여백을 두어 숨 쉴 공간을 확보하고, 전체적인 레이아웃을 깔끔하게 정리.
• 색상 팔레트 단순화: 너무 많은 색상 대신, 클래식 블루 테마의 색상들을 중심으로 안정감 있게 재구성.

이렇게 수정하고 나니, 웹사이트가 훨씬 더 깔끔하고 전문적인 느낌을 주더라고요. 징크스라는 캐릭터의 개성은 유지하면서도 정보 전달력은 훨씬 높아졌습니다. 이 경험을 통해 디자인은 '예쁜 것'뿐만 아니라 '효율적인 것'이 얼마나 중요한지 다시 한번 깨달았어요.

11일차의 피그마 실습은 저에게 웹 디자인의 본질에 대해 다시 한번 생각해보게 하는 소중한 경험이었습니다. 단순히 도구를 다루는 기술을 넘어, 사용자 중심의 사고방식과 디자인 원칙의 중요성을 깊이 깨달을 수 있었어요. 앞으로 이 배움을 발판 삼아 더욱 성장하는 디자이너가 되겠습니다! 더 궁금한 점이 있다면 언제든지 댓글로 물어봐 주세요~