상태

• 09 Dec, 2025
• • 기획서

화면정의서에서 '상태 관리'는 뭐고 '상호작용'은 뭐야

화면정의서에서 '상태 관리'는 뭐고 '상호작용'은 뭐야 양식이 날 가르친다 사수가 화면정의서 템플릿을 주었다. "이 양식 채워서 내일까지 줘봐." 열어봤다. 항목이 20개다.화면 ID 화면명 접근 권한 화면 상태 UI 구성요소 상태 관리 사용자 상호작용 데이터 바인딩 예외 처리 ...앞에 5개까지는 채웠다. 여기서 막혔다. "상태 관리가 뭐지?" 검색했다. 또 모르는 단어가 나온다. "상호작용은 또 뭐야?" 이게 끝이 없다.채우다가 검색하고, 검색하다가 또 검색하고 화면정의서 양식을 받은 게 어제 오후 5시. 오늘 오전 10시 30분. 아직도 6번째 항목이다. '상태 관리' 검색했다. "화면의 상태(State)를 정의하고 관리하는 것" 상태가 뭔데. '화면 상태' 검색했다. "UI가 보여주는 특정 시점의 데이터와 모습" 아직도 모르겠다. '화면 상태 예시' 검색했다.로딩 중 데이터 없음 에러 발생 정상 표시아. 이거구나. 근데 '상태 관리'는 뭐야. 상태를 어떻게 '관리'한다는 거지. 다시 검색. "상태 관리 예시" "버튼 클릭 시 로딩 상태로 전환, API 응답 후 정상 상태로 전환" ...이걸 적으라는 건가? 30분 지났다. 아직도 한 항목이다.'상태'라는 단어가 이렇게 어려울 줄 사수한테 슬랙 보냈다. "XX님, 상태 관리 항목에 뭘 적어야 할까요?" 답장 왔다. "화면이 가질 수 있는 상태들이랑, 상태 전환 조건 적으면 돼." ...뭐라는 거지. 일단 내가 이해한 걸 적어봤다. 상태 목록:초기 상태: 로딩 중 정상 상태: 데이터 표시 에러 상태: 에러 메시지 표시 빈 상태: '데이터 없음' 표시상태 전환:초기 → 정상: API 성공 시 초기 → 에러: API 실패 시 정상 → 빈: 데이터 0개일 때적고 보니까 뭔가 맞는 것 같기도 하다. 근데 확신이 없다. 사수한테 또 물어봐야 하나. 눈치 보인다. 일단 다음 항목으로 넘어갔다. '사용자 상호작용' 또 막혔다. 상호작용이면 클릭? 그것만? '사용자 상호작용' 항목. 버튼 클릭하면 어떻게 되는지 적는 거겠지. 적었다. 버튼 클릭 시:[검색] 버튼: 검색 실행 [필터] 버튼: 필터 팝업 열림 [정렬] 버튼: 정렬 옵션 표시끝? 선배 기획서 열어봤다. 같은 항목 찾았다. 사용자 상호작용:검색창 포커스: 키보드 표시 (모바일), 자동완성 표시 검색어 입력: 실시간 자동완성 목록 갱신 자동완성 항목 클릭: 해당 검색어로 검색 실행 검색 버튼 클릭: 입력된 검색어로 검색, 로딩 표시 검색 결과 없음: '결과 없음' 메시지, 추천 검색어 표시 스크롤: 페이지 하단 도달 시 다음 페이지 로드 뒤로가기: 이전 검색 결과로 복귀 (히스토리 유지)...이 정도로 적어야 하는구나. 나는 3줄 적었다. 선배는 7줄이다. 차이가 뭐지. 나는 '클릭하면 뭐 한다'만 적었다. 선배는 '그 전에 뭐가 있고, 그 후에 뭐가 나온다'까지 적었다. 아. 상호'작용'이구나. 사용자가 하고, 화면이 반응하고, 다시 사용자가 보는 거. 주고받는 거다.근데 이게 상태 관리랑 뭐가 달라 다시 봤다. 상태 관리: "초기 → 정상: API 성공 시" 상호작용: "검색 버튼 클릭: 검색 실행, 로딩 표시" ...겹치는 거 아니야? 헷갈린다. 유튜브 켰다. "화면정의서 작성법" 13분짜리 영상. 2배속으로 봤다. 강사가 말한다. "상태 관리는 '화면 자체'의 상태입니다. 로딩중인지, 에러인지, 정상인지. 상호작용은 '사용자 행동'에 대한 반응입니다. 클릭, 입력, 스크롤 등." 조금 이해됐다. 상태: 화면이 지금 어떤 모습인가 상호작용: 사용자가 뭘 하면 어떻게 되는가 근데 '검색 버튼 클릭 → 로딩 상태'는 어디에 적어야 하지. 상호작용에 적으면 상태 전환이 중복된다. 상태 관리에만 적으면 버튼 클릭이 빠진다. ...둘 다 적는 건가? 모르겠다. 일단 둘 다 적었다. 중복이면 사수가 빼라고 하겠지. 왜 이렇게 항목이 많아 화면정의서 항목 20개. 3일째 작성 중이다. 처음에는 '이거 하루면 되겠네' 했다. 화면 캡처 붙이고, 버튼 설명 적고, 끝인 줄 알았다. 아니었다. 각 항목마다 검색하고, 예시 찾고, 이해하고, 적어야 한다. '데이터 바인딩' 항목 나왔을 때는 포기하고 싶었다. "이게 대체 뭐야..." 검색했다. "화면 요소와 데이터를 연결하는 것" ...그래서 뭘 적으라는 거야. 선배 문서 또 봤다. 데이터 바인딩:상품명: product.name 가격: product.price (원 단위, 3자리 콤마) 이미지: product.thumbnail_url (기본 이미지: default.png) 재고: product.stock > 0 ? '구매 가능' : '품절'아. API에서 받은 데이터를 화면 어디에 어떻게 보여줄지 적는 거구나. 이해하는 데 40분 걸렸다. 적는 데 20분 걸렸다. 한 항목에 1시간이다. 20개면 20시간. 3일째 작성 중인 이유다. 이게 기획자 일이 맞나 기획서 쓴다고 3일을 썼다. 회의는 못 갔다. 사수가 대신 갔다. 동료가 물어봤다. "요즘 뭐 해?" "화면정의서 쓰고 있어." "아직도?" 부끄럽다. 선배들은 하루 만에 쓴다던데. 나는 3일째 10개 항목이다. 느린 건가, 꼼꼼한 건가. 모르겠다. 사수한테 중간 점검 받았다. "상태 관리랑 상호작용이랑 좀 겹치는데?" "아... 그럼 어떻게..." "상태는 화면 전체 관점에서, 상호작용은 각 요소별로 나눠서 써봐." ...처음부터 그렇게 말해주지. 고쳤다. 1시간 걸렸다. 이게 맞는 건지 아직도 모르겠다. 그냥 사수가 '이제 됐어' 할 때까지 고치는 거다. 양식이 선생님이다 화면정의서 양식. 처음엔 '이거 왜 이렇게 복잡해' 했다. 지금은 안다. 양식이 없으면 뭘 적어야 할지 모른다. 양식이 있으니까 채울 수 있다. 틀렸어도 일단 채운다. 사수가 고쳐준다. 다음번엔 덜 틀린다. 이게 배우는 과정이다. '상태 관리'도 처음엔 몰랐다. 3일 동안 검색하고, 선배 문서 보고, 영상 보고, 사수한테 피드백 받았다. 이제는 안다. 완벽하진 않아도 대충은 안다. '상호작용'도 마찬가지다. 처음엔 버튼 클릭만 적었다. 지금은 포커스, 입력, 스크롤, 에러 상황까지 적는다. 양식의 각 항목이 하나씩 내 머릿속에 쌓인다. 다음 기획서는 2일이면 될 것 같다. 그다음은 하루. 언젠가는 선배처럼 쓸 수 있을 거다. 지금은 양식을 따라 채운다. 채우다 보면 배운다.양식 채우다 보면 언젠가 양식 없이도 쓸 수 있게 된다. 지금은 그 과정이다.