권한 그룹 편집 화면의 라벨이 하이퍼링크로 읽힌다는 제보에서 시작했습니다. 범인은 도움말이 달린 라벨 전부에 실선 밑줄을 주던 CSS 한 줄이었어요. 밑줄을 떼는 김에 반대 방향도 찾았습니다 — 링크처럼 생겼는데 링크가 아니라서 새 탭도 키보드 포커스도 죽어 있던 자리들이요. 이튿날에는 같은 화면들의 표 정렬을 잡으면서, 정렬을 정하는 건 값의 가짓수가 아니라 값의 성격이라는 규칙을 문서에 박았습니다.
9월 7일에 셋째 탭을 "개념체계"에서 "개념 탐색"으로 바꿨고, 이틀 뒤 되돌렸습니다. 같은 날 필터 칸 이름도 "정보 주제"에서 "개념체계"로 돌아왔어요. 되돌리면서 선택지 구조도 한 단으로 폈는데, 이틀 전에 넣었던 정렬 하나가 그 과정에서 조용히 같이 빠졌습니다. 같은 주에 서비스 소개 문구와 홈 목록 표제도 손봤고, 세 자리 모두 화면의 낱말이 가리키는 대상과 어긋나 있던 자리였습니다.
표준데이터 상세를 목업 구성으로 옮기는 날, 오전에 넣은 카드 표제 순서를 한 시간 뒤 뒤집었고, 일주일 전에 단 필드명 링크를 걷어냈고, 그래프에서 관계를 추론하던 코드를 슬롯 라벨로 대체했습니다. 뒤집은 것마다 왜 처음 판단이 틀렸는지를 문서에 남겼어요. 그 기록을 결정별로 옮깁니다.
OID 등록 신청 화면을 열면 여섯 구획이 다 펼쳐졌다가 한 박자 뒤에 하나로 접혔습니다. 접는 일을 DOMContentLoaded의 스크립트가 하는데, 그 앞에 d3를 동기로 싣고 있어 첫 페인트와의 틈이 310ms였어요. 서버가 첫 단계 말고는 hidden을 달아 내보내고 d3를 defer로 돌렸습니다. 같은 구조인 표준데이터 신청은 틈이 1ms라 안 보였을 뿐이었습니다.
통합 검색의 카탈로그·개념체계 칸을 셀렉트에서 접이식 트리 드롭다운으로 바꾸고 선택지마다 건수를 붙였습니다. 건수는 "고르면 몇 건이 나오나"인데, 지금 걸린 조건 안에서 세면 고른 항목만 남고 나머지는 전부 0건이 돼요. 세는 모집단에서 범위 조건을 뺐고, 체크 즉시 조회하던 걸 같은 날 패널을 닫을 때 한 번으로 바꿨습니다.
토큰에 없는 색 이름은 빌드 오류가 아니라 그냥 안 칠해집니다. 그렇게 죽어 있던 클래스 142곳을 토큰으로 바꾸고, 다시 들어오면 빌드를 세우는 가드를 붙였어요. 이어서 팔레트 안에 있는 색들의 명도 대비를 재봤더니 회색 스케일이 통째로 한 칸 밝아 입력 경계와 회색 글자가 기준 미달이었습니다. 못 고치기로 한 35곳도 이유와 함께 적었습니다.
홈 "데이터 현황"에 물리 아키텍처만 "준비 중"으로 있었습니다. 데이터를 붙이려고 기존 집계 함수를 열어보니 ASN.1 데이터셋을 세고 있었어요. 화면이 말하는 것과 다른 것을 세고 있었던 겁니다. 같이 정리한 퀵메뉴에서는 카드 폭을 flex-1로 두면 안 되는 이유를 만났습니다.
서비스 소개 페이지가 "상세검색·기관·유형·태그 필터"를 설명하고 있었는데, 그 필터는 진작 없어졌습니다. 도입 배경은 4차 산업혁명·D.N.A·ICBM 같은 몇 년 지난 문구였고요. RFP와 연차보고서를 근거로 다시 썼습니다. 같은 축에서 읽기 전용 화면의 "필수 *" 표기도 걷어냈는데, 그건 이틀 전 제가 적은 규칙을 뒤집는 일이었습니다.
잠긴 버튼에 사유를 title로 달아뒀는데 아무리 호버해도 안 떴습니다. disabled 요소는 마우스·키보드 이벤트를 통째로 죽여서 네이티브 title조차 안 뜬다는 걸 그때 알았어요. aria-disabled로 바꿔 의미만 남기고 클릭은 핸들러에서 막았습니다. 그 다음엔 말풍선이 스크롤 패널에 잘리고, 휠 관성 때문에 떴다 사라지는 문제가 이어졌습니다.
구성 속성의 "필수 여부"를 선택·권장·필수 3단계로 바꿨습니다. 서버 필드는 아직 불리언이라 권장은 화면에만 남는 반쪽짜리인데, 그걸 알면서 먼저 한 이유를 적었습니다. 이어서 표시 순서를 드래그로 바꾸게 만들고, 그 과정에서 이틀 전에 넣은 정렬 버튼을 스스로 지웠습니다.
값 유형 토글을 누를 때마다 화면이 튀었습니다. 하나 고쳤는데 증상이 남아서 다시 팠더니 원인이 둘이었어요. sr-only로 숨긴 체크박스가 일으키는 focus scroll, 그리고 tbody 전면 재렌더로 scroll anchoring 기준이 사라지는 문제. 각각 어떤 대안들을 놓고 무엇을 골랐는지, 그리고 "안 튀는 것 같다"를 숫자로 바꾼 검증까지 정리합니다.
편집 화면에서 아무것도 건드리지 않고 저장만 눌렀는데, 이미 선택돼 있던 값이 빈 값으로 저장되는 버그가 있었습니다. 세 가지 해결책을 놓고 고민한 끝에 "값은 동기, 라벨만 비동기"로 나누는 씨앗 패턴을 골랐어요. 에러 로그가 남지 않는 조용한 데이터 소실을 어떻게 재현하고 잡았는지 정리합니다.
표준데이터·OID·아키텍처·Open API 4개 이용안내 탭을 아코디언에서 캐러셀로 통일한 작업입니다. 네 가지 UI 후보를 놓고 캐러셀을 고른 근거, 감수하기로 한 트레이드오프(페이지 내 검색 불가), 그리고 탭마다 복붙돼 있던 인라인 매크로를 공유 파티얼 하나로 합친 이야기예요.
클래스 참조 필드처럼 옵션이 수백 개인 select를 스크롤로만 찾던 걸 입력 검색으로 좁히는 검색형 select로 되살린 작업입니다. 라이브러리를 다시 들일지 직접 얹을지부터 정하고, placeholder 잘림·× 해제 안 되는 버그, 그리고 Font Awesome svg 모드가 참조를 유령으로 만드는 함정까지 하나씩 잡았어요.
토큰 신청 검토 화면에서 승인/거절을 우측 정렬 버튼 그룹으로 묶고, 거절 사유를 적어둔 채 승인을 눌러버리는 오클릭에 확인 가드를 넣은 작업입니다. 네 가지 마크업 방식 중 form 속성을 고른 이유와, 커스텀 모달 대신 네이티브 confirm을 남겨둔 판단을 정리해요.
메타클래스 속성을 편집할 때마다 컨텍스트를 가리던 모달을 들어내고, 트리/리스트 옆 인라인 폼으로 옮긴 결정과 그 결과를 정리합니다.
디자인과 화면이 조금씩 다른데 뭐가 틀린 건지 모르겠다는 상태를 정리하려고, Figma 44프레임을 코드와 전수 대조해 리포트를 만들었습니다. 핵심은 차이를 찾는 게 아니라 "의도적 조정"과 "결함"을 가르는 규칙이었어요. 그리고 2.5개월 뒤에 확인해보니 HIGH 4건 중 2건이 아직 미반영입니다.
"있는데 도움 안 되는 정보"가 안내 화면을 어떻게 무겁게 만드는지, 표준데이터/OID 등록 프로세스 안내에서 중복 단계 카드 흐름을 제거하며 깨달은 점을 정리합니다.
Bootstrap 기본 페이지네이션이 파란색 테마 위에서 활성 상태가 묻히는 문제를 카드형 버튼 + 아이콘으로 해결한 회고입니다.
JSTree의 주요 플러그인 설정 방법과 contextmenu 플러그인으로 사용자 정의 우클릭 메뉴(추가/편집/삭제/복사)를 구현하는 방법을 정리합니다.
다단계 입력이 필요한 등록 폼에 Creation Wizard 모드와 일반 편집 모드를 분리해서 구현한 과정을 정리합니다. 상태 관리, 트리 연동, "완전 종료" 버그까지.
입사 넉 달째, 검색 화면이 어떤 모양이어야 할지 정해진 게 없어서 가짜 데이터로 시안 넷을 만들었습니다. 열흘 뒤 팀원이 그중 셋에 실제 데이터를 연결했고, 하나는 끝내 연결되지 않았어요. 여덟 달 뒤 제가 그 앱을 통째로 지웠습니다. 시안이 최종 화면에 무엇을 남겼는지는 코드로 이을 수 없었습니다.
트리 구조 시각화를 위해 jsTree와 VTree를 조사하고 Django Jinja 템플릿에 붙였던 기록입니다. 1년 넘게 운영한 지금 답을 알고 있습니다 — jsTree는 살아남아 트리 화면의 기본이 됐고, VTree는 걷어내고 D3 직접 구현으로 갔어요. 갈린 기준과 함께, 당시 코드에서 지금 보면 걸리는 지점들(텍스트 기반 라우팅, 템플릿 리터럴 JSON 주입)을 정리했습니다.
jQuery 기반 트리 플러그인 jsTree의 플러그인·API·이벤트를 표로 정리한 레퍼런스입니다. 실무 트리 화면에 붙이면서 걸린 지점들을 뒤에 덧붙였습니다 — check_callback의 진짜 의미, 루트 노드 id가 #이라는 함정, 기본 contextmenu를 버리고 모달로 간 이유까지.
jQuery 기반 로딩 애니메이션 플러그인 waitMe의 사용법과 실제 적용 사례를 정리합니다.
Semantic Markup은 HTML 요소를 사용할 때 그 요소가 담고 있는 내용의 의미를 반영하는 것을 말합니다. 예를 들어, 단순히 텍스트를 굵게 표시하기 위해 <b> 태그를 사용하는 대신, 중요한 내용을 강조하기 위해 <strong> 태그를 사용합니다. 이렇게 하면 브라우저와 …
모달창과 팝업창은 사용자 인터페이스에서 정보를 제공하거나 사용자와 상호작용하기 위해 사용되는 창입니다. 이 두 가지 창은 비슷해 보일 수 있지만, 사용 방식과 특성에서 큰 차이가 있습니다.