안녕하세요~ 유니입니다.
지난주에 이어서 관리자 페이지를 만들어보았습니다.
랜딩을 관리해주는 관리자 너무 필요하잖아요!~~그래서 기존에 블로그에만 있던 수정을 버려버리고 관리자 페이지로 모두 작업하기로 합니다.
참고) 지난주 사례글
https://www.gpters.org/nocode/post/instructor-portfolio-animation-living-bQsbawHA8ETheW4
지난 1주차에 만든 강사 프로필 사이트를 기반으로, 이번엔 한 단계 더 나아간 고도화를 시도했어요. 바로 관리자 페이지를 따로 만들어서, 프론트에 노출되는 내용을 직접 제어할 수 있는 구조로 바꾸는 거였죠.
그냥 정적인 사이트가 아니라, “변화할 수 있는 사이트”, 즉 관리자가 쉽게 내용 편집도 하고 디자인도 조정할 수 있는, 그런 구조를 목표로 했습니다.
사용 도구 🛠️
Figma Make
작업 흐름 및 구성 💡
프론트(사용자용)는 그대로 다크모드 유지
새로 만든 관리자 페이지(백오피스)는 라이트모드로 설계
Make를 활용해 각종 데이터를 프론트와 연동, 관리자가 직접 제어할 수 있게 구성
관리자페이지 구성
들어가는곳
최상단 문의하기 옆에 관리자라는 버튼을 추가하여 넣었습니다.
로그인페이지
로그인페이지 만들때 비번, 암호를 자꾸노출하고, 데모계정이라면서 제공하는데, 이부분은 선택해서 제거해달라고 해야합니다. 😢메인페이지
대시보드 형태로 간략하게 요약하고, 문의 내용을 빠르게 확인하기 위해서구성강의관리
강의 관리는 예정된것, 강의 한것에 대한 상태값으로 구분해서 사이트에 노출하도록구성인사이트 관리
블로그글을 작성하는 곳은 원복해서 html로 내용을 작성하게 되어있지만, 편집기를 붙이려고 했는데 나중에 RPA연동해서 자동으로 포스팅 등록되도록 하면 굳이 필요없을것 같았어요!약간 중간에 시행그런데 일이 꼬이기 시작한 건…
"어...? 왜 텍스트가 안 보여...?"
관리자 페이지에 태그나 셀렉트 박스를 넣었는데, 글자가 전혀 안 보이는 거예요. 랜딩페이지는 진한색거의 다크 모드인데 알고 보니... 관리자는 라이트모드에 글자색이 하얀색으로 설정돼 있어서, 흰 배경에 흰 글씨가 뙇! 😱
이걸 고쳐보겠다고 덤볐는데, 문제를 확인하는 과정에서 뭔가 이상한 클릭을 했는지... 많은 에러로 다시 원복해서 그동안 작업한 내역은 사라졌습니다.
자 담주까지 자동화까지 완성하려면 부지런히 수정해야겠네용 ㅎㅎ결과와 배운 점1. 60버전를 넘어서면 에러가 몰려온다 📉
저만 그럴수있는데 이상하게 작업이 60버전쯤 되면서, 여기저기서 에러가 터지기 시작했어요. 뭔가 전체 흐름이 얽히고 설킨 상태에서 구조를 수정하면, 예상 못 한 부분에서 문제가 생기는 거죠.
💡 교훈: "구조 변경은 미리, 아주 초기에!"
2. 피그마의 배신(?), 자동 변경 주의보 ⚠️
피그마는 정말 강력한 도구예요. 그런데 가끔... 너무 알아서 하려는 경향이 있어요. 컴포넌트가 자동으로 정렬되거나, 색상 스타일이 묘하게 바뀌는 경우가 생기더라고요.
진여진 스터디장님의 조언처럼, 꼭 “변경 이력”을 자주 확인하고, 문제가 발생했을 때 빠르게 복 구할 수 있는 습관이 필요하다는 걸 뼈저리게 느꼈습니다.
3. 기대감과 책임감 사이의 균형 😌
이 구조가 완성되면, 정말 편하게 사이트 콘텐츠를 관리할 수 있게 돼요. 디자인도, 텍스트도, 블럭 구성도 자유자재로 바꿀 수 있으니까요!
하지만! 그만큼 디자인이 어긋날 가능성도 높아지고, 유지보수도 세심하게 챙겨야 해요. 피그마의 숨은 반항(?)을 견디며 말이죠... 🤖
도움 받은 글
진여진 스터디장님의 피그마 팁 공유 👍
Figma 공식 문서: https://help.figma.com/
Make 커뮤니티 포럼 (문제 생겼을 때 의외로 도움 됨)
저를 더 만나고 싶다면?
유니가 운영하는 니툴내툴노코드 오픈톡방(암호: gpters)
https://open.kakao.com/o/gW2P1KKf
캔로봇님과 유니가 같이 운영하는 코파일럿 ATOZ (암호: gpters)
https://open.kakao.com/o/gt1Za07f
