https://account.kakaoi.ai/ 카카오 i 계정 하나의 계정으로 만나는 모든 카카오 i 서비스 account.kakaoi.ai 입사 이래로 계속해서 맡고있는 메인 프로젝트는 카카오 i 계정 이다. 카카오엔터프라이즈가 서비스하는 모든 것의 기본이 되는 계정에 대한 페이지를 담당한다. 사실 서버개발 쪽이 일이 많은 프로젝트여서 마크업 페이지가 많지는 않다. 카카오에게 카카오 계정이 있다면 카카오엔터프라이즈에는 카카오 i 계정이 있다. 현재 앵귤러 기반으로 동작하고 있고, 리액트로 전환하는 작업을 2021년 3Q에 진행할 것 같다. +) 2022년 1Q까지 리액트 변환 작업을 하다가 프로젝트가 해산되면서 중단하게 되었습니다.

시작하며 💡 이 스토리북 활용기는 마크업 개발자를 대상으로 작성되어 있습니다. 앵귤러의 아주 기초적인 기능을 활용한 방법이므로 프론트엔드 개발자 분들이 보시기에는 오류가 있을 수 있습니다. 더 좋은 방법이 있다면 코멘트로 알려주세요 :) 마크업 개발을 하는 사람들은 저마다 다양한 방식으로 작업물을 관리합니다. 프론트엔드 개발과 완전히 동떨어져서 정적인 결과물을 만드는 사람도 있고 별도의 마크업 산출물 없이 프론트 개발과 같은 선상에서 진행을 하기도 합니다. 마크업 개발자의 숙련도나 개발 환경에 따라 다르지만 마크업 개발도 더 나은 협업 방식에 대해 고민해야 한다고 생각합니다. 이 프로젝트 같은 경우에는 하나의 템플릿이 여러가지 케이스로 갈리는 화면들이 많이 필요했습니다. 기획자/디자이너와의 원활한 소통을..

다양한 이메일 클라이언트 이메일 클라이언트는 정말 다양하기 때문에 우선순위를 정해서 적용하는 것이 바람직하다. Gmail을 쓰는 유저의 경우에도 모바일 웹(크롬, 사파리, 삼성브라우저, 웨일 브라우저)에서 열어보는지, 앱(지메일, 메일앱에 지메일연동, Outlook앱에 지메일 연동)을 통해 열어보는지 바로 알 수는 없습니다. 그래서 테스트 해야할 양도 늘어나게 된다. 하지만 모든 테스트 환경을 갖추고서 확인하기는 쉽지 않기 때문에 메일링 서비스가 매우 중요하다면 아래와 같은 유료 서비스를 통해서 검증할 수도 있다. HTML Email Check and Validation Tool | HTML Email Check Check the markup (HTML, XHTML, CSS) of HTML emails ..

입사하고 처음 할당 된 메인 업무였습니다. 처음에는 디자인팀에서 티스토리 스킨 편집에서 어려움을 겪으시면 돕는 개념으로 투입이 되었으나 TF로 발령이 나면서 생각보다 오랜 기간 작업을 하게 되었습니다. 원래 티스토리 블로그를 사용 중이어서 낯설지는 않았지만 이정도로 스킨 편집을 해본 건 처음이라 크고 작은 시행착오들이 많이 있었습니다. 나름 이것저것 손 댄 것이 많아서 주요 수정사항들을 정리해 보았습니다. 최종 요구사항 메인 슬라이더 기능 커버영역 비디오 삽입 공통 카테고리 추가, 카테고리별 색상 추가 채용 섹션 추가 푸터 확장 게시글 리스트 형식 페이지 목차 추가 각주 추가 내부 포커스 링크 생성 작성자 서명 추가 채용공고 추가 latex 플러그인 추가 1-1. 메인 슬라이더 기능 기본적인 커버영역 슬..

2020 이메일 서명, 이메일 템플릿 마크업 사내 주차시스템 마크업 전담 카카오 i 계정 마크업 전담 카카오엔터프라이즈 기술블로그 스킨 개발 전담 카카오엔터프라이즈 채용사이트 개선 참여 2021 카카오 i 클라우드 포탈 사이트 메인 개선, 청구서 템플릿 마크업 담당 카카오워크 블로그 스킨 개발 전담 카카오 i 계정 리액트 전환 2022 카카오워크 내 서비스 마크업 담당 (근태, 공지사항, 다이내믹 패널) 카카오워크 어드민 디자인 시스템 마크업 전담 2023 카카오워크 어드민 디자인 시스템 마크업 전담

더할 나위 없이 뿌듯했던 2019년

CGEX 모바일 웹 Only Desktop 버전 웹사이트로 런칭하고 나서 당연히 모바일 웹에 대한 필요성도 있었다. 애매하게 남은 12월 한 달을 어떻게 알차게 보낼 수 있을까 고민하다가 혼자서 먼저 모바일 웹을 어느정도 선까지 만들어보고 싶은 욕심이 생겼다. 디자인은 이미 어느정도 나와 있는 상황이어서 내가 나머지 페이지들을 모바일화 하는 동안 디자이너님께서 트레이드 페이지 디자인을 고도화해주셨다. 12월 안에 내가 해낼 수 있을까 걱정이 되기도 했는데 생각보다 빠르게 진행되어서 예상보다 1주일이나 당겨서 완료할 수 있었다. 2018년 모바일웹의 목표는 일단 모바일에서 볼 수 있는 레이아웃으로 정돈한다! 였다. Balance, Order 페이지의 테이블들은 아직 반응형에 최적화 되어있지는 않다. 그런 ..

https://cgex.com/ 발목 골절로 5주간 재택근무를 마치고 더 이상 재택근무를 할 수 없는 상황이어서 출근을 하게 되었다. 코인원 BTC 마켓 오픈 준비로도 바쁜 와중에 내가 갑자기 크게 다치는 바람에 CGEX 일을 많이 못 도와주고 지체가 되어 있는 상황이었다. 복직해서 아예 오전은 코인원 오후는 씨젝스 작업시간으로 분리해서 최대한 집중하려고 했다. 코인원이 먼저 마무리 되는 덕에 씨젝스는 오픈전 일주일에 거의 최소한의 오픈을 위한 피델리티를 위해 진짜 풀 야근으로 작업을 했다. 목발 집고 회사 다니면서 진짜 힘들었던 시간이었다. 개인적으로 아쉬웠던 점은 사전등록 페이지를 재택근무 중에 급하게 요청이 와서 밤새서 만들어 넘겼는데, 여러가지 이유로 오픈 직전에 사전등록 페이지가 열렸다. 하지만..

https://coinone.co.kr/promotion/mobile_app/ 코인원 앱 2.0이 런칭되면서 앱이 대대적으로 큰 개편이 이뤄졌다.따라서, 홍보 페이지가 필요했고 BTC 마켓 오픈 이후에 약간 시간이 생겼을 때 작업할 수 있었다. 간단한 텍스트와 데모 동영상이 보여지는 심플하지만 깔끔한 페이지였다.동영상 퀄리티가 좋아서 이 페이지는 동영상이 다 한 것 같다. 처음에 관련 레퍼런스로 전달 받은 페이지는 네이버 앱 홍보 페이지였다.https://alpha.naver.com/experiment/newnaverapp 이 때 video 관련 태그를 한 번만 더 확인했더라면 실수하지 않았을텐데 ㅠㅠvideo playsinline 어트리뷰트를 적어주지 않아서 모바일 웹에서 동영상이 보이지 않는 이슈가 ..

코인원 BTC 마켓 오픈에 맞춰 진행된 5주간의 긴 이벤트를 다루는 페이지였다. 다른 개발 이슈는 크게 없었고 중간에 카드 형식으로 나열되어 있는 5장의 카드가 모바일에서는 가로로 스크롤이 되어야 하고, 초기 진입에 현재 진행중인 카드에 포커스가 맞춰져 있어야 하는 요건이 있었다. 이 때, 발목 골절로 집에서 재택근무 하던 때였는데 진짜 몸 상태 안 좋았었는데도 이거 개발한다고 밤새 붙잡고 있었던 기억이 난다. 카드는 완료(done) / 진행중(ing) / 대기 세가지 상태로 구성되어 있고, 위에 시간이 지날 수록 타임라인의 range가 차오는 형태를 가지고 있다. 카드 상태값은 done, ing 클래스 추가로 변환시키고 위에 타임라인은 data-step="n" (1