클라우드 콘솔 프론트엔드는 일반 홍보 페이지와 다른 문제를 다룹니다. 많은 리소스를 표로 표시하고, 사용자의 권한에 따라 가능한 작업이 달라지며, 삭제나 배포 같은 동작의 결과를 분명하게 알려야 합니다. 실습 프로젝트라면 다음 다섯 단계를 하나의 작은 대시보드로 구현해 보세요.
1. 사용자가 할 일을 먼저 정하기
예를 들어 ‘서버 목록에서 상태를 확인하고 중지할 서버를 선택한다’는 한 가지 흐름을 정합니다. 필요한 데이터 필드, 화면 상태, 실패 가능성을 그린 뒤 코드를 시작하세요. 단순한 카드 여러 개보다 실제 업무 흐름 하나가 기능 검증에 유리합니다.
2. 목록과 필터를 재현 가능하게 만들기
리소스 이름·상태·지역·생성일을 표로 보여주고 정렬·필터가 데이터와 일치하는지 확인합니다. 로딩 중, 결과 없음, 네트워크 실패 상태를 각각 따로 표시하세요. 예제 데이터라면 실제 클라우드 계정과 연결된 것처럼 오해시키지 말고 모의 데이터라고 밝힙니다.
3. 권한과 위험한 동작을 분리하기
읽기만 가능한 사용자와 변경 가능한 사용자의 화면을 나눌 수 있지만, 버튼을 숨기는 것만으로 접근 제어가 완성되지는 않습니다. 서버 측 권한 검사도 필요합니다. 삭제 같은 작업은 대상·영향을 확인하고 완료 또는 실패 결과를 알려야 합니다.
4. 폼과 상태 메시지의 접근성 점검
검색·설정 폼에 눈에 보이는 레이블을 연결하고 키보드만으로 조작해 보세요. 오류가 생기면 색깔만 바꾸지 말고 원인과 수정 방법을 텍스트로 제시합니다. W3C WAI의 접근 가능한 폼 가이드는 레이블, 검증, 알림을 구체적으로 설명합니다.
5. 결과물을 포트폴리오로 남기기
사용자 시나리오, 화면별 상태, 데이터 출처, 권한 검사 위치, 테스트 결과를 README에 담습니다. 배포 주소와 재현 방법을 함께 제공하고 구현하지 않은 클라우드 기능은 명확히 표시하세요. 제출 전에는 프론트엔드 포트폴리오 검증법으로 링크와 동작을 점검하세요.