한눈에 들어오게 — 대시보드와 로그인 화면을 2열로 다시 짠 하루

📚 「AI 헬스케어 파이널 프로젝트」 연재 22편입니다. (21편: 실서비스에서 줄줄이 터진 버그, 그리고 디자인을 통째로 갈아입힌 하루)

📝 한줄 요약

화면이 위아래로 길게 늘어져 한눈에 안 들어오던 대시보드와 로그인 화면을, 2열 레이아웃(화면을 좌우 두 칸으로 나눠 배치하는 방식)으로 다시 짠 날입니다. 출석 잔디는 월별 달력으로 바꾸고, 2초 만에 사라져 못 보던 알림은 화면 가운데 뜨는 창으로 옮겼습니다. 이날 한 시각 다듬기만 8건. 추측 대신 브라우저에 직접 띄워 보면서 한 칸씩 맞췄습니다.

바쁘시면 이것만 읽어도 돼요:

길게 늘어진 화면을 좌우 2열로 나눠, 스크롤 없이 한눈에 들어오게 정리
2초 뒤 사라져 시야 밖에 있던 알림을 화면 가운데 창(모달)으로 옮겨 안 놓치게
출석 표시를 잔디 → 월별 달력으로 교체. 새 데이터를 만든 게 아니라 기존 기록을 다시 모아 보여줌
진단 안 받은 사람과 받은 사람에게 다른 배치를 보여줌. 로그인도 좌(소개)·우(폼)로 나누되 휴대폰에선 1열로
교훈: 작은 화면 다듬기는 머릿속으로 상상하지 말고 실제로 띄워 보며 한 칸씩 맞춰야 빠름

🎯 이런 분들께 도움돼요

정보가 너무 많아 한눈에 안 들어오는 화면을 정리하고 싶은 분
만든 알림·안내가 사용자에게 잘 전달되는지 고민인 분
AI에게 디자인·배치 손보기를 시켜본 적 없는 분

😫 문제 상황 (Before)

서비스를 직접 써 보면 늘 새로 보이는 게 있습니다. 이날도 EC2 서버(우리가 만든 앱이 실제로 돌아가는 인터넷 서버)에 올라간 화면을 제 손으로 써 봤어요. 그런데 답답했습니다.

대시보드(앱을 켜면 처음 보이는 요약 화면)가 위에서 아래로 한없이 길었습니다. 출석 현황, 진행률, 건강 지표, 챌린지 현황이 줄줄이 세로로 쌓여 있어, 뭐 하나 보려면 한참 스크롤을 내려야 했죠. 노트북처럼 넓은 화면에선 오른쪽이 텅 비고 가운데에 길게 한 줄로만 차 있으니 더 어색했습니다.

알림도 문제였습니다. 체크리스트를 다 채우면 “잘했어요” 하고 알림이 화면 맨 위에 떴는데, 2초 뒤 사라졌습니다. 그런데 제 눈은 그때 화면 아래쪽 체크 버튼을 보고 있었죠. 떴다가 사라진 줄도 몰랐습니다. 만든 사람만 아는 알림. 그건 없는 거나 마찬가지였습니다.

이날 목표는 단순했습니다. 흩어진 정보를 좌우로 나눠 한눈에 보이게, 알림은 눈앞에 두기.

🛠️ 사용한 도구

도구: Claude Code
모델: Claude Opus
특이사항: 이날은 큰 기능을 새로 만드는 날이 아니라 화면 배치를 손보는 날. 그래서 AI에게 한꺼번에 시키기보다, 직접 한 줄씩 고치고 브라우저에 띄워 확인하기를 반복

🔧 작업 과정

출석 잔디를 월별 달력으로 — 새로 만들지 않고 ‘다시 모아서’

/Users/junhee_johnny/Downloads/대시보드 수정사항.pdf
위의 수정사항을 반영해줘

팀에서 정리한 수정사항 문서를 AI에게 통째로 건넸습니다. 첫 번째는 출석 표시를 바꾸는 일이었어요. 그동안 출석을 보여주던 잔디(작은 네모가 날마다 채워지는 깃허브식 출석판)를 월별 달력으로 바꾸기로 했습니다. 날짜가 또렷한 달력이 우리 서비스엔 더 직관적이었거든요.

여기서 제가 신경 쓴 건 “새 표를 만들지 말 것”이었습니다. 출석 기록은 이미 데이터베이스(자료 저장소)에 차곡차곡 쌓여 있었어요. 달력을 새로 만든다고 데이터까지 새로 만들면, 똑같은 정보가 두 군데로 갈라져 나중에 꼬입니다. 그래서 AI에게 이미 있는 기록을 한 달치만 다시 불러와 달력에 얹도록 했습니다. 날짜마다 알 스티커(기본·은빛·황금)로 그날의 성취를 표시했고요.

캐릭터(우리 서비스 마스코트인 ‘알’)의 성장 숫자는 손대지 않았습니다. 달력은 보여주기만 하지, 점수를 다시 세지 않게 했어요.

💡 화면을 바꿔도 데이터는 그대로 두세요. 보여주는 방식만 바꾸고, 숫자의 원천은 한 군데로 유지하는 게 안전합니다. 같은 정보가 두 군데 생기면 반드시 어긋납니다.

”큰 화면에선 너무 커요” — 추측 말고 직접 띄워서

모바일웹 버전에서는 달력의 크기는 적당한데 웹 버전으로 크기를 키우면
너무 큰것 같아 레이아웃을 조정해서 전체 사이즈를 조정할수 있을까?

달력을 넣고 보니 새 문제가 생겼습니다. 휴대폰 화면에선 딱 맞는데, 노트북처럼 넓은 화면에서 보니 달력 하나가 화면을 꽉 채울 만큼 커졌어요. 이런 건 글로 상상해선 답이 안 나옵니다. 화면 폭이 얼마일 때 글자가 어떻게 접히는지는 실제로 띄워 봐야 보이거든요.

그래서 AI에게 코드를 고치게 한 뒤, 브라우저를 자동으로 열어 화면을 사진으로 찍어 확인하는 방식을 썼습니다. 넓은 화면에서만 달력 폭에 상한을 두어, 휴대폰에선 그대로, 노트북에선 적당한 크기로 보이게 맞췄습니다. 이게 이날 작업 내내 반복한 방식이에요. 고치고 → 띄우고 → 사진 찍어 보고 → 또 고치고.

💡 화면 다듬기는 머릿속 시뮬레이션이 잘 안 통합니다. 실제로 띄워 사진으로 확인하면서 조금씩 맞추는 게, 한 번에 완벽히 짜려다 헛도는 것보다 훨씬 빠릅니다.

길게 늘어진 화면을 좌우 2열로 — 보는 사람에 따라 다르게

대시보드 넓은 화면에서 레이아웃을 이렇게 배치하면 어떨까?

핵심 작업이었습니다. 저는 원하는 배치를 손으로 그려 그림으로 캡처해 AI에게 보여줬어요. 글로 “왼쪽엔 이거, 오른쪽엔 저거”라고 길게 설명하는 것보다, 그림 한 장이 훨씬 정확하게 전달됩니다.

세로로 길게 쌓였던 위젯을 좌우 두 칸으로 나눴습니다. 그런데 여기서 우리 서비스의 특징이 하나 있어요. 사용자가 두 종류라는 점입니다. 아직 콩팥병 진단을 안 받은 사람과, 이미 진단받은 사람. 둘에게 필요한 정보가 다릅니다.

ckd 진단자의 경우 캐릭터 창과 달력창을 1:1로 하
챌린지 현황관리 ui를 아래로 내려서 레이아웃 맞춰줘

병원 예약 일정을 요기 빈칸에 넣어줘

진단 안 받은 사람: 왼쪽에 달력, 오른쪽에 진행률·건강 지표. 아래줄엔 챌린지 현황과 생활습관
진단받은 사람: 왼쪽 달력, 오른쪽에 캐릭터 창을 같은 크기로. 비어 보이던 자리엔 병원 예약 일정을 넣음

두 칸의 높이를 맞추는 게 은근히 까다로웠습니다. 한쪽이 짧으면 옆 칸과 키가 안 맞아 위쪽으로 붕 떠 보이거든요. 그래서 칸을 위로 몰지 말고 세로로 꽉 채우도록 손봤습니다. 작아 보여도 이런 디테일이 화면의 인상을 좌우합니다.

💡 사용자가 여러 종류면, 화면도 그에 맞게 갈라지는 게 맞습니다. “모두에게 똑같은 화면”이 늘 친절한 건 아니에요. 진단 여부에 따라 필요한 정보를 다르게 배치했습니다.

사라지던 알림을 화면 한가운데로

체크리스트를 다 채워도 알림을 못 보던 문제. 원인은 분명했습니다. 알림이 화면 맨 위에서 2초만 떴다 사라지는데, 정작 사용자 눈은 화면 아래 체크 버튼에 가 있으니 놓칠 수밖에요.

해법도 단순했습니다. 알림을 화면 한가운데 뜨는 창(모달이라고 합니다 — 화면 가운데 떠서 시선을 붙잡는 알림 창)으로 옮겼어요. 가운데 떠 있으니 안 보고 지나칠 수가 없죠. 다만 모든 알림을 거창하게 띄우면 그것도 피곤합니다. 그래서 가벼운 건 탭하면 닫히게, 전체를 다 채운 순간만 좀 더 또렷한 창으로 차등을 뒀습니다.

💡 알림은 만드는 게 아니라 “보이게” 만드는 게 핵심입니다. 아무리 정성껏 만들어도 사용자 시야 밖에 있으면 없는 것과 같아요. 눈이 향하는 곳에 둬야 전달됩니다.

로그인 화면도 좌우로, 단 휴대폰에선 1열로

로그인 화면을 이런 레이아웃으로 만들어줘 서비스 내용도 채워 주고

마지막은 로그인 화면이었습니다. 그동안은 한가운데에 입력 칸만 덩그러니 있었어요. 처음 온 사람에게 “이게 무슨 서비스인지” 한마디도 안 하고 비밀번호부터 물어보는 셈이었죠.

그래서 화면을 좌우로 나눴습니다. 왼쪽엔 서비스 소개(우리가 뭘 해주는지 네 가지로), 오른쪽엔 로그인 입력 칸. 처음 보는 사람도 왼쪽을 읽으며 자연스럽게 입력으로 넘어가게요.

로그인 화면이 모바일 폭에서 1열로 서비스 설명 다음으로 로그인 ui가 나오지 않고
로그인 ui만 나와

그런데 휴대폰에서 켜 보니 왼쪽 소개가 통째로 사라지고 입력 칸만 보였습니다. 좁은 화면에서 왼쪽 칸을 숨기도록 해 둔 게 너무 과했던 거죠. 휴대폰에선 좌우로 나눌 만큼 폭이 없으니, 소개를 위에 두고 입력 칸을 아래에 두는 1열로 자연스럽게 쌓이게 고쳤습니다. 넓은 화면은 좌우 2열, 좁은 화면은 위아래 1열. 이렇게 화면 폭에 따라 모양이 바뀌는 걸 반응형(화면 크기에 맞춰 배치가 알아서 달라지는 방식)이라고 합니다.

💡 넓은 화면용 배치는 좁은 화면에서 꼭 다시 확인하세요. PC에서 멀쩡하던 게 휴대폰에선 절반이 사라지는 일이 흔합니다. 두 크기를 다 띄워 봐야 진짜 끝난 겁니다.

✅ 결과 (After)

Before vs After

항목	Before	After
대시보드	세로로 길게 늘어져 스크롤 필요	좌우 2열로 한눈에, 진단 여부별 다른 배치
출석 표시	잔디(네모 출석판)	월별 달력 (기존 기록 재활용, 새 표 없음)
완료 알림	상단에 2초 뜨고 사라짐 → 못 봄	화면 가운데 창으로 안 놓침
로그인	입력 칸만 덩그러니	좌(소개)·우(폼), 휴대폰에선 위아래 1열

결과물

좌우 2열로 정리된 대시보드(진단 안 받은 사람·받은 사람 각각)
월별 달력 출석 위젯(기존 기록 그대로 활용)
화면 가운데 뜨는 완료 알림
좌우로 나뉜 로그인 화면 + 휴대폰 1열 대응
이날 손본 화면 8건 모두 실제 서비스에 반영

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

그림으로 보여주기: 원하는 배치를 손으로 그려 캡처해 주면, 긴 글 설명보다 훨씬 정확하게 전달됨
고치고-띄우고-확인하기 반복: 화면 손보기는 한 번에 완성하려 말고, 실제로 띄워 사진 찍어 보며 조금씩
데이터는 그대로 두기: 보여주는 방식만 바꾸고, 숫자의 원천은 한 군데로 유지

이렇게 하면 안 돼요

머릿속으로만 배치 짜기: 글자가 어떻게 접히는지는 띄워 봐야 보임. 상상은 자주 빗나감
넓은 화면만 보고 끝내기: 휴대폰에서 절반이 사라질 수 있음. 두 크기 다 확인
알림을 만들고 안심하기: 시야 밖에 있으면 없는 것. “보이는 위치”까지가 알림 작업

🌍 다른 업무에 적용한다면?

화면 배치 이야기 같지만, 사실 **“정보를 어떻게 보여줄 것인가”**는 문서·발표·보고서에도 똑같이 통합니다. 한 페이지에 다 욱여넣어 위아래로 길게 늘어진 보고서보다, 좌우로 나눠 핵심을 한눈에 보이게 한 한 장이 훨씬 잘 읽히죠. 그리고 보는 사람이 다르면(임원용·실무자용) 배치도 갈라지는 게 맞습니다. 무엇보다, 아무리 잘 만든 핵심 메시지도 읽는 사람 눈이 향하는 곳에 놓지 않으면 전달되지 않습니다. 알림을 가운데로 옮긴 것과 같은 이치예요.

🚀 앞으로의 계획

이렇게 화면을 다듬고 나니, 한 가지 객관적인 질문이 떠올랐습니다 — “그래서 우리 서비스, 지금 몇 점짜리지?” 데모데이(완성한 결과물을 발표하는 날)가 코앞이라, 막연한 자신감 말고 점수로 알고 싶었어요. 그래서 다음 편에서는 AI 13명에게 우리 프로젝트를 각자 채점시켜 87점이라는 진단을 받고, 그 13명이 깎은 점수를 하나씩 메우며 데모데이 전 마지막 스퍼트를 올린 이야기를 풀어볼게요. AI를 ‘만드는 도구’가 아니라 ‘평가하는 심사위원’으로 쓴 날입니다. 다음 막에서 이어집니다.

📋 재사용 가능한 프롬프트

프롬프트 1: 그림으로 배치 요청하기

[화면/문서]를 이런 식으로 배치하고 싶어. (원하는 모양을 손으로 그린 그림 첨부) 이 그림처럼 좌우로 나눠서 배치해줘. [왼쪽에 넣을 것], [오른쪽에 넣을 것]도 채워줘.

프롬프트 2: 보여주는 방식만 바꾸기 (데이터 보존)

[표시 방식 A]를 [표시 방식 B]로 바꾸고 싶어. 단, 새 데이터를 만들지 말고 이미 저장된 기록을 다시 불러와 보여주기만 해줘. 원본 숫자는 손대지 마.

프롬프트 3: 넓은 화면·좁은 화면 둘 다 확인

[화면]을 넓은 화면에선 좌우 2열, 좁은 화면(휴대폰)에선 위아래 1열로 만들어줘. 두 크기 모두 실제로 띄워서 화면을 사진으로 찍어 보여줘. 빠진 부분 없는지 같이 확인하자.

📌 「AI 헬스케어 파이널 프로젝트」 연재 22편입니다. 다음 막에서 또 이어집니다.