IT

UI 설계 기준과 도구 정리|공공누리집 개선 사례와 Figma 실무 과정으로 보기

밍캉 2026. 10. 3. 09:35
반응형

노트북 화면에 디자인 도구를 띄워 놓고 화면 배치를 다듬는 손
노트북 화면에 디자인 도구를 띄워 놓고 화면 배치를 다듬는 손

 

UI를 처음 공부할 때 무엇부터 익혀야 하는지 궁금하신 분들이 많습니다. 이 글에서 UI는 사용자가 보는 화면의 구성과 배치를, UX는 그 화면을 거쳐 서비스를 이용하는 과정 전체를 가리킵니다. 용어의 학술적 정의나 Figma 외 디자인 도구 비교는 이 글에서 다루지 않습니다. 결론부터 말하면, 이 글에서 다루는 실무 과정은 Grid·Hierarchy·padding 같은 레이아웃 원리와 Figma 디자인을 HTML로 옮기는 과정부터 가르칩니다. 공공 분야에서는 2026년 8월 공공누리집 UI/UX 위원회가 출범해 첫 회의를 열었습니다.

 

이 글은 레이아웃 원리와 도구, 위원회의 개선 기준, 국민신문고·바른땅 화면 개선 사례, 입문 경로 순서로 정리합니다.

 

이 글의 핵심
✔ 실무 과정의 첫 단계는 레이아웃 설계 원리와 Auto-layout(Flex)입니다.
✔ 공공 화면 개선은 사용자 관점에서 불편을 짚는 것이 기준입니다.
✔ 교육 과정 모집마감일은 2026-10-16이며, 현재 모집 여부는 기관에 확인해야 합니다.

 

📐 UI 실무에서 먼저 익히는 기준과 도구

책상 위 종이에 격자를 그어 화면 배치를 스케치하는 장면
책상 위 종이에 격자를 그어 화면 배치를 스케치하는 장면

 

호남직업전문학교의 2026년 4월 공고 기준 과정은 레이아웃 설계 원리부터 가르칩니다.

 

STEP 1에서는 Grid(격자)·Hierarchy(위계)·padding(안쪽 여백) 같은 원리를 다룹니다. 같은 단계에서 Auto-layout(Flex)과 Figma 디자인을 HTML로 변환하는 AI 프로세스도 배웁니다. STEP 4는 개발자 인수인계 가이드 작성과 Figma 디자인의 HTML/CSS 변환을 다룹니다. 노코드 웹 개발 플랫폼 Webflow로 웹사이트를 구축하고 배포하는 과정도 들어 있습니다.

 

화면 설계와 사용자 조사는 프로젝트에서도 나뉩니다. Project A는 피그마 변수 기반 디자인 시스템을, Project B는 UX 리서치와 프로토타입을 다룹니다.

 

정리하면, 전체 240시간 가운데 절반인 120시간이 STEP 2~3에 배정돼 있습니다.

 

단계이름시간

STEP 1 UX/UI Foundation 80시간
STEP 2~3 UX Logic & AI Acceleration 120시간
STEP 4 Translation & Deployment 40시간
합계 전체 과정 240시간

 

수료 결과물은 Redesign과 New Build를 포함한 실무 포트폴리오 2종입니다. 여기에는 Figma·AI·No-Code·HTML 기술 스택 증명과 설계 과정 주석이 들어갑니다. 디자인을 만드는 데서 끝나지 않고 개발 인수인계와 배포까지 과정에 넣었다는 점이 눈에 띕니다.

 

🏛️ 공공누리집 UI/UX 위원회가 내세운 개선 기준

 

한 총리는 2026년 8월 27일 \"이용단계 하나를 줄이는 작은 개선만으로도 국민의 편의가 크게 달라질 수 있다\"고 말했습니다.

 

이어 \"클릭 한 번을 줄이면 온 국민의 경쟁력이 높아진다는 생각으로 임해 달라\"고 당부했습니다. 위원회는 세금 납부, 민원 신청, 증명서 발급, 정보 조회 같은 행정서비스가 온라인으로 제공되는 현실에서 출발했습니다. 일부 공공누리집에서는 복잡한 화면 구성이나 이용 절차로 불편을 겪는 사례가 적지 않았습니다.

 

제1차 회의는 2026년 8월 27일 정부서울청사 9층 대회의실에서 열렸습니다. 회의에 앞서 디자인, UX, AI 분야 민간전문가 10명이 국무총리 자문위원으로 위촉됐습니다. 행정안전부는 「중요 온라인 공공서비스 UI/UX 개선방안」을 보고했습니다.

 

위원들은 전체를 일률적으로 개편하기보다 많이 쓰는 주요 서비스 중심으로 살펴봐야 한다는 데 뜻을 모았습니다. 한 총리는 \"정부가 미처 보지 못한 불편을 사용자 관점에서 세심하게 짚어달라\"고 당부했습니다. 위원들은 앞으로 주요 공공누리집의 이용과정을 사용자 관점에서 직접 살펴볼 예정입니다.

 

정리하면, 내 서비스 화면을 점검할 때도 \"이 단계를 하나 줄일 수 있는가\"를 첫 질문으로 옮겨 쓸 수 있습니다. 순서로 옮기면 먼저 많이 쓰는 주요 화면을 고르고, 다음으로 사용자 관점에서 이용과정을 처음부터 끝까지 따라가 본 뒤, 마지막으로 걸리는 불편마다 개선안을 적어 두면 됩니다. 위원회 출범과는 별개로, 위원회 출범 이전인 2025년에도 화면 요소를 손본 공공 사례가 두 건 있었습니다.

반응형

🔍 UI 화면 요소를 손본 2025년 공공 사례 비교: 국민신문고·바른땅

민원 화면을 띄운 모니터 앞에서 메뉴 위치를 손가락으로 가리키는 모습
민원 화면을 띄운 모니터 앞에서 메뉴 위치를 손가락으로 가리키는 모습

 

두 사례는 각각 국민신문고 점수 비노출 결정과 바른땅의 UI 개선 공지를 보여줍니다.

 

2025년 5월 청원 기준으로, 청원인은 민원 열람 화면에 '회원 점수'가 자동 노출되는 UI 설계를 문제로 들었습니다. 화면을 캡처해 다른 기관에 전달할 때 노출이 반복될 수 있다는 주장이었습니다. 국민권익위원회는 2025. 09. 22. 처리결과를 통지했습니다. 결론은 '나의 신문고' 화면에서 국민신문고 점수가 노출되지 않도록 조치한다는 것입니다.

 

공간정보제도과는 2025년 7월 17일 바른땅 시스템 공지를 등록했습니다. 같은 날 19:00부터 20:00까지 이용이 중단될 예정이라는 내용이었습니다. 사유는 주제도 선택필지 좌표정보 조회 기능 추가 및 사이드바 UI 개선 외 2건입니다. 작업 내역은 편의개선 1건, 오류개선 0건, 기능추가 2건입니다.

 

사례화면 요소내용기관·날짜진행 상태

국민신문고 '나의 신문고' 화면 점수 비노출 조치 결정 국민권익위원회·2025. 09. 22. 처리결과 통지(조치 결정)
바른땅 사이드바 사이드바 UI 개선 공간정보제도과·2025-07-17 작업 공지
바른땅 주제도 선택필지 좌표정보 조회 기능 추가 공간정보제도과·2025-07-17 작업 공지

 

정리하면, 국민신문고는 점수를 노출하지 않도록 조치하기로 결정했고 바른땅에는 조회 기능이 추가됐습니다. 2분할화면에서 필지를 선택하면 좌표정보를 조회하는 기능입니다.

 

🎓 입문 경로 두 가지: 실무 교육 과정과 인턴 공고

 

'Ai기반 차세대 UX/UI 실무' 과정의 모집마감일은 2026-10-16입니다. 2026년 4월 공고 기준이므로 현재 모집 여부는 기관(062-605-8000)에 확인해야 합니다.

 

✔ 이 과정은 산업구조변화대응특화훈련 유형입니다.
✔ 교육기간은 2026.10.12부터 2026.12.31까지, 월요일부터 금요일까지입니다.
✔ 교육 시간은 09:00부터 16:00까지이고, 교육장소는 계림동입니다.
✔ 모집인원은 20명입니다.
✔ 훈련장려금은 단위기간 소정출석일수의 80% 이상 출석해야 지급됩니다.
✔ 기숙사를 이용하면 훈련장려금(교통비 등)이 지급되지 않습니다.

 

첫 단계는 본교 입학원서 접수와 고용24 수강신청을 모두 마치는 것입니다. 최종 합격은 정부 승인까지 되어야 가능합니다. 공고에는 내일배움카드 필요가 표기돼 있습니다.

 

대상은 구직자·재직자·자영업자이며, 구직자 외 대상은 별도 조건이 있을 수 있습니다. 재직자나 자영업자라면 그 조건을 수강 문의 전화로 먼저 확인하는 것이 좋습니다.

 

플리토의 UX/UI 디자이너 인턴 채용은 20260923에 시작해 20260930에 마감된 지난 공고입니다. 고용형태는 '기간제|기타'로 표기됐습니다. 접수는 채용 홈페이지를 통한 온라인 입사지원이었습니다. 면접전형 시에는 학력 증빙자료를 요청했습니다.

 

정리하면, 교육 과정은 본교 입학원서 접수와 고용24 수강신청을 모두 마쳐야 하고 인턴 공고는 채용 홈페이지를 통한 온라인 입사지원을 안내했습니다. 다음 인턴 공고를 기다린다면 이 지원 방식을 참고 예시로 삼을 수 있습니다.

 

😊 마무리

 

공공누리집 개선에서 한 총리가 강조한 질문은 사용자가 거치는 단계를 하나라도 줄일 수 있는가입니다.

 

입문자라면 레이아웃 원리와 Figma 다루기부터 시작해 보시길 권합니다. 실무 초년생이라면 공공 서비스 화면 하나를 골라 무엇이 줄었고 무엇이 더해졌는지 분석해 보는 것부터 권합니다. UI 공부를 시작하시는 분들께 도움이 되었으면 좋겠습니다.

반응형