Insight 13

2025 웹어워드 호텔·리조트부문 대상 수상 🏆

https://www.i-award.or.kr/Web/Assess/FinalCandidateView.aspx?REG_SEQNO=15403제작사 제작진 PM김단영 리더기획김예슬 리더,김호상 리더,이유진 프로,신지은 프로,김윤신 매니저,양진영 매니저,김선유 매니저,오윤기 매니저디자인최은영 리더,장솜이 리더,김서하 리더,이www.i-award.or.kr 2025년 이행까지 완료한 프로젝트가 웹어워드 호텔·리조트 부문에서 대상을 수상하게 되었습니다. 그간 축적해온 통합 서비스 경험과 브랜드별 차별화 전략이 인정받은 결과이자, 앞으로 나아가야 할 방향을 명확히 보여준 의미 있는 성과입니다. 앞으로 더 나은 서비스와 수행을 위해 평가내역을 요약하고, 정리해보고자 합니다.수상의 의미이번 수상은 단순한 비주얼 완성도를..

Figma 컴포넌트 재사용률 지표관리 · 추적표 기준

프로젝트의 볼륨이 방대해 질수록 컴포넌트가 어디서, 얼마나 쓰였는지 추적하는 일이 중요해집니다.이를 정량적으로 관리하려면, 스프린트 단위로 신규 생성과 기존 재사용 비율을 함께 정리하는 표를 만들어두는 것이 가장 실용적일것 같다는 생각이 듭니다.기획·디자인·개발 등 유관 파트 담당자와 모두 같은 지표를 공유하고 이를 기반으로 논의하고 있으며, 컴포넌트의 누락 없이 누적 분석이 가능하고, 공통가이드가 제대로 작동하고 있는지도 한눈에 확인할 수 있습니다.컴포넌트 재사용률 추적 표✅ 1) 기본 구조 — 월/스프린트 기준 스프린트전체 사용기존 사용신규 생성재사용률(%)신규 비율(%)비고Sprint 014638882.6%17.4%초기 구축Sprint 025245786.5%13.5%재사용 증가Sprint 0341..

UI/UX 공통가이드 및 Figma 표준 운영 프로세스

프로젝트 규모가 커질수록, 가이드를 ‘만드는 것’보다 ‘팀 전체가 같은 방식으로 작업하도록 제작하는 것’이 훨씬 어려운 것 같습니다. 작업 히스토리 관리, 용어 통일, 컴포넌트 재사용까지 모두 팀이 한 호흡으로 움직여야만 공통가이드가 유의미해지는데요. 아래 표준 가이드는 실제 프로젝트 수행 시 최소한의 규정안에서 일관된 서비스를 제작하기 위해 작성해 보았습니다. 아래 내용을 초안으로 프로젝트 또는 서비스마다 다듬어가며 확장 · 활용해보려 합니다. Figma 라이브러리 운영 표준 프로세스 (Standard Operating Process)1. 목적프로젝트 전 구간에서 UI/UX 일관성을 유지컴포넌트 중복 생성 방지유관부서 및 담당자 간 참조 기준 통일유지보수 및 확장 시 불필요한 작업 감소2. 운영 원칙..

글로벌 플랫폼 리뉴얼, 일관된 UI/UX를 위한 공통가이드 구축기

호텔 리뉴얼 프로젝트 수행 후기※ 본 글은 소속 회사의 내부 게시판에 본인이 작성한 내용을 기록 목적으로 재작성하였습니다.기업 식별을 최소화하기 위해 관련 명칭은 마스킹 처리하였으며, 문제가 있을 경우 댓글로 알려wellness-dani.tistory.com화면설계의 일관성을 시스템으로 만드는 과정피그마 기반 UI/UX 공통가이드 제작 경험 대규모 온라인 플랫폼 리뉴얼을 진행할 때 가장 중요했던 건 ‘일관된 사용자 경험’이었습니다.디바이스가 달라지고, 언어가 달라지고, 담당자가 바뀌어도같은 기준으로 일할 수 있도록 만드는 시스템 — 그게 이번 프로젝트의 핵심 목표였습니다. 이 글에서는 피그마(Figma)를 활용해 UI/UX 공통가이드를 제작하고 운영한 실제 경험을 정리했습니다.반응형웹 환경에서 P..

피그마로 화면설계 공통템플릿 만들기

처음 기획 일을 시작했을 때만 해도 화면설계서는 늘 PPT로 작성했습니다. 체크박스 하나, 버튼 하나를 매번 그려 넣고, 수정 사항이 생기면 전체 문서를 열심히 찾아 바꿔야 했죠. 파일을 주고받다 보면 버전이 꼬이는 건 일상이었고요.그러다 피그마(Figma)로 작업 방식을 전환한 뒤로는 화면설계의 흐름이 완전히 달라졌습니다. 한마디로 협업이 빨라지고, 디자인의 일관성이 지켜지고, 관리가 훨씬 편해졌다는 게 가장 큰 장점이었습니다.왜 PPT 대신 피그마일까?실시간 협업: 기획자, 디자이너, 개발자가 동시에 같은 화면을 보고 코멘트를 남기니, 회의가 줄어들고 피드백 속도도 눈에 띄게 빨라집니다.UI 컴포넌트 재사용: 버튼, 체크박스, GNB 같은 기본 요소를 컴포넌트로 만들어두면, 한 번 수정으로 전체에 반..

기획자가 GPT로 AI 딥 리서치 활용하는 법

AI 딥 리서치, 어떻게 해야 제대로 할까AI를 업무에 활용해보면 누구나 한 번쯤 이런 경험을 합니다.“분명 대답을 해주긴 하는데, 내가 원하는 맥락은 아니고 너무 포괄적이다.”“자료처럼 쓰려고 했는데 출처가 불분명하다.”“보고서에 바로 붙여넣기에는 너무 길거나 애매하다.” 결국 핵심은 AI에게 어떻게 질문하느냐에 있습니다. 질문의 질이 곧 답의 질을 좌우합니다. 특히 리서치처럼 정보의 정확성과 활용도가 중요한 경우에는 질문 설계가 훨씬 더 중요해집니다. 제가 여러 차례 실험해본 결과, AI 딥 리서치를 제대로 활용하기 위해서는 딱 세 가지를 챙기면 됩니다. 바로 맥락 → 출처 → 목표. 1. 맥락을 알려주기: “나는 누구인가”부터 시작하기 AI는 내가 누구인지, 어떤 상황에 있는지, 무엇을 위해..

피그마 단축키 모음집

항목단축키 조합레이어 전체선택&닫기Ctrl+A 선택 > Ctrl 누른채로 레이어닫기픽셀활성/비활성Ctrl+Shift+’이미지 한번에 삽입Ctrl+Shift+K > 드래그&드롭으로 이미지 삽입레이어이름 한번에 바꾸기Ctrl+R잠금설정 레이어 전체 해제Ctrl+Alt+Shift+L잠금설정 해제Ctrl+Shift+L배율 스케일 확장K +오브젝트 개별 선택Ctrl+클릭왼쪽정렬Option+A오른쪽정렬Option+D상단정렬Option+W하단정렬Option+Shorizontal 정렬,가로축 중앙 정렬Option+Hvertical 정렬, 세로축 중앙 정렬Option+V오토레이어Shift+A오토레이어 해제Shift+Alt+A스타일복사Ctrl+Alt+c이동 MoveV코멘트 추가 또는 보기 Add/Show CommentsC..

비전공, 개발자가 아닌 사람을 위한 바이브 코딩

비전공, 개발자가 아닌 사람들을 위한 바이브 코딩에 대해 알아보겠습니다. 바이브 코딩은 특히 비전공자들에게 코딩을 더 쉽게 접근할 수 있도록 돕는 교육 프로그램입니다. 이제 그 필요성과 기초 개념, 실제 업무에의 적용 사례를 통해 바이브 코딩의 유용성을 알아보겠습니다.바이브 코딩 소개바이브 코딩은 비전공자도 어렵지 않게 코딩을 배울 수 있도록 만들어진 프로그램입니다. 단순한 코드 작성법부터 시작해, 복잡한 프로그래밍 언어에 대한 이해를 도와줍니다. 누구나 쉽게 접근할 수 있는 이 프로그램은 비전공자들이 새로운 기술을 배우고, 자신의 업무에 적용할 수 있는 기회를 제공합니다. 특히, 최근의 기술 발전으로 인해 AI와 자동화가 중요해진 만큼, 바이브 코딩의 필요성은 더욱 커지고 있습니다.비전공자를 위한 바이..