웹사이트 권한 구분하기, 역할별 페이지를 분리해서 만드는 이유

ALT

산을 배경으로 한 한글 글꼴

📝 한줄 요약

초과근무 데이터를 만들다가 문제에 마주쳤어요. 회계 담당자는 “승인 대기 중인 것들”을 봐야 하고, 대표는 “전체 현황”을 봐야 하는데, 같은 데이터인데 다르게 보여야 한다는 걸 깨달았습니다.

이걸 해결하려고 권한별 페이지를 분리했어요. 같은 데이터를 여러 역할이 다르게 봐야 할 때, 이게 왜 중요한지를 배웠습니다.

Before: 모든 사용자가 같은 화면에서 같은 데이터만 봄
After: 역할에 따라 다른 화면과 다른 데이터를 봄

👥 이런 분께 추천

• 팀으로 웹사이트를 운영하는 분

• 회사 내 다양한 부서가 같은 데이터를 봐야 하는데 각자 보는 게 다른 분

• “이 사람은 이 정보까진 보면 안 되는데?”라고 생각해본 분

• 협업 도구나 관리 시스템을 만드는 분

🙋 내 스펙 & 환경

진행 방법

1. 왜 하게 되었나

초과근무 자동화 앱을 만들면서, 이 데이터를 봐야 하는 사람이 두 가지 역할이 있다는 걸 알았어요.

회계 담당자가 봐야 할 것:

• 승인 대기 중인 것만 보기

• 승인하기 또는 거절하기

• “내가 처리해야 할 것” 중심

대표가 봐야 할 것:

• 회사 전체의 초과근무 현황

• 부서별/월별 통계

• “전체적으로 뭐가 많이 나오는지” 중심

같은 “초과근무” 데이터인데, 두 사람이 봐야 하는 게 완전히 달랐어요.

2. 첫 번째 벽: 데이터가 4건만 보인다?

개발을 진행하다가 이상한 일이 생겼어요. 시연 데이터를 열 개 정도 만들었는데, 화면에는 4건만 나타났어요.

“어? 데이터가 지워졌나?” 처음엔 당황했어요. 나머지 6개는 어디 갔을까요?

3. 두 번째 벽: 권한이 일하고 있었다

앱 테스트를 위해 “현장 관리자” 역할로 로그인하고 있었는데, 그 역할은 “자기 지역의 데이터만” 볼 수 있도록 설정되어 있었어요.

그래서 4건만 보인 거였어요. 권한이 이미 작동하고 있었는데, 내가 그걸 모르고 있었던 거예요.

배운 것:

• 뭔가 이상하면 “버그”라고 생각하기 전에 “권한”을 의심해봐야 한다

• 사용자가 보는 데이터는 그 사용자의 역할에 따라 달라질 수 있다

• 같은 데이터베이스인데 다르게 보이는 것도 괜찮다 (오히려 정상이다)

4. 깨달음: 권한별 페이지가 필요하다

이때 깨달았어요. 회계와 대표가 같은 초과근무 데이터를 본다고 해서, 같은 화면으로는 안 된다는 걸요.

회계 페이지:

• 제목: “처리 대기”

• 보여주는 것: 승인 대기 중인 초과근무만

• 액션: “승인” 또는 “거절” 버튼

대표 페이지:

• 제목: “월간 현황”

• 보여주는 것: 회사 전체의 초과근무 통계

• 액션: 보기만 (수정 금지)

이렇게 따로 만들면, 같은 데이터베이스를 써도 각 역할이 필요한 것만 봤어요.

5. 해결: 권한별 페이지 분리

그래서 이렇게 구성했어요:

초과근무 앱
├─ 회계 담당자 → Records (처리 대기함)
│  └─ 승인/거절 가능
└─ 대표 → Summary (월간 현황)
   └─ 보기만 가능

회계는 “내가 해야 할 일”을 집중해서 처리하고, 대표는 “회사 전체가 어떤지”를 한눈에 봅니다.

6. 각 페이지의 데이터 필터

같은 데이터베이스이지만, 누가 접근했는지에 따라 다른 데이터를 보여주도록 설정했어요:

회계 화면의 쿼리:

모든 초과근무 중 "승인 대기" 상태인 것들
AND 이 회계가 담당하는 지역의 것들

대표 화면의 쿼리:

모든 초과근무를 월별·부서별로 집계

7. 검증: 역할별로 다르게 보이는가

실제로 테스트했어요:

회계 계정으로 로그인 → "처리 대기" 4건 보임 ✓
대표 계정으로 로그인 → "월간 현황" 통계 보임 ✓

역할에 따라 완전히 다른 화면이 나타났어요. 완벽했습니다.

🛠 사용한 도구

배운 점

💡 핵심 1: “같은 데이터, 다른 뷰”가 정상이다

개발자가 아니면 이건 좀 이상해 보여요. “같은 데이터인데 왜 다르게 보여?” 할 수 있죠.

하지만 현실은 그래요. 재무팀이 보는 매출 현황과 마케팅팀이 보는 매출 현황은 달라야 합니다.

💡 핵심 2: 권한은 “보안”이 아니라 “UX”다

권한을 보안 문제로만 생각했어요. 하지만 이번 경험에서 권한은 “사용자 경험”이라는 걸 깨달았어요.

회계가 “처리 대기”만 봐야 하는 이유는 보안 때문이 아니라, 회계가 해야 할 일을 빠르게 끝내도록 하기 위함이에요.

💡 핵심 3: 역할별 페이지를 먼저 설계해야 한다

만약 처음부터 페이지를 나누지 않고 “모든 사용자가 같은 화면”으로 만들었다면? 나중에 고치기 정말 힘들어질 거예요.

웹사이트를 만들 때 가장 먼저 물어봐야 할 질문:

1. “누가 이 앱을 쓸 건가?”

2. “각 사람/팀이 봐야 하는 게 다른가?”

3. “다르다면, 페이지를 따로 만들어야 한다”

💡 핵심 4: 데이터베이스의 권한 기능이 이미 다 처리해준다

Supabase에서 권한을 설정하면, 각 역할이 “자동으로” 그 역할만 볼 수 있는 데이터만 가져와요.

내가 따로 “이 사람은 이것만 보여줘” 코드를 짤 필요가 없어요. 데이터베이스가 이미 제어하고 있었어요.

적용할 점

🎯 앞으로 만들 협업 도구에서

다음에 팀이 함께 쓰는 웹사이트(협업 도구, 관리 시스템 등)를 만들 때, 이 순서를 따르겠어요:

1. 누가 쓰는가 정하기 (회계/대표/현장 담당자 등)

2. 각자 봐야 하는 게 다른가 확인하기

3. 다르다면, 페이지를 따로 만들기 (처음부터, 나중에 아니라)

4. 데이터베이스에 권한 설정하기

📋 역할별 페이지 설계 체크리스트

새로운 웹사이트를 만들 때, 이 체크리스트를 먼저 채워요:

🔜 다음 단계

1. 현재: 역할별 페이지와 권한 분리 ✓

2. 다음: 권한별로 수정할 수 있는 필드도 제한하기 (예: 대표는 결과만 보고 수정은 못하게)

3. 그다음: 감사 추적 (누가 언제 뭘 했는지 기록)

솔직한 소감

처음엔 “데이터가 4건만 보여”라는 문제가 버그인 줄 알았어요. 하지만 알고 보니 권한이 정상적으로 작동하고 있었어요.

이 경험을 통해, 웹사이트를 만들 때 “기술”만큼 중요한 게 “역할 분석”이라는 걸 배웠습니다. 누가 뭘 봐야 하는지 정확히 이해하지 않고는 페이지를 제대로 만들 수 없어요.

지금까지는 초과근무 데이터를 “하나”로 생각했는데, 이제는 “회계와 대표가 보는 두 개의 다른 데이터”라고 생각하게 됐어요. 같은 원본이지만, 관점이 다르면 필요한 것도 다르다는 걸 깨달았습니다.

비개발자도 “권한이 뭔지” 이해하고 설계할 수 있다는 걸 깨달았습니다.